@charset "utf-8";

.urs_premium {}
.invitation,
.pinfobox { padding:4.5%; padding-right:200px; position:relative; overflow:hidden;
	background: #040709; /* Old browsers */
	background: -moz-linear-gradient(-45deg,  #040709 0%, #13222e 51%, #213c50 75%, #060b0e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg,  #040709 0%,#13222e 51%,#213c50 75%,#060b0e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg,  #040709 0%,#13222e 51%,#213c50 75%,#060b0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#040709', endColorstr='#060b0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

.pinfobox .txt { color:#ffd200; font-size:1.5em; line-height:1.6;}
.pinfobox .txt span { color:#fff; }
.pinfobox .benefit { color:#a5c0d3; margin-top:2%; font-size:1.15em; line-height:1.6; }
.pinfobox .benefit li { padding:2px 0; }
.pinfobox .benefit span { color:#fff }
.pinfobox .benefit * { }
.pinfobox .benefit .om-bt-type4 { vertical-align:middle }
.pinfobox .img { display:block; position:absolute; right:-100px; top:50%; margin-top:-132px;}

.urs_premium .pinfobox {margin-bottom:2.5%; }

.urs_normal {}
.urs_normal .pinfobox .benefit { color:#fff; }

.pbenefit { padding:10% 4.5%; background-color:#fff; }
.pbenefit .title { text-align:center; font-size:1.2em; line-height:1.2; font-weight:bold; }
.pbenefit .list { text-align:center; margin-top:6%; }
.pbenefit .list li { display:inline-block; padding:0 3%; }
.pbenefit .list .txt { display:block; margin-top:12px; font-size:1.1em; line-height:1.2; }
.pbenefit .list img { width:159px; }

@media screen and (max-width:767px) {
	.pinfobox { font-size:.8em; padding-right:4.5% }
	.pinfobox .img { display:none }

	.pbenefit { font-size:.9em; padding:4.5%; }
	.pbenefit .list { margin-top:0; }
	.pbenefit .list li { display:block; padding:5% 0; }
}


.invitation { position:relative; padding:0; color:#fff; overflow:hidden; margin-bottom:2.5% }
.invitation .state { padding:30px 40px; font-size:1.1em; padding-right:200px; line-height:1.2 }
.invitation .state li {}
.invitation .state li * { vertical-align:middle }
.invitation .state .label { display:inline-block; width:130px; }
.invitation .state .cnt { display:inline-block; font-size:3.2em; font-weight:bold; }
.invitation .state .myinvitation { color:#ffd200; }
.invitation .state .total { margin-top:10px; }
.invitation .state .total .cnt { font-size:1.8em }

.invitation .visual { position:absolute; right:-84px; top:-42px;
	transition:all .3s;
	-webkit-transition:all .3s;
	-o-transition:all .3s;
	-moz-transition:all .3s;
}
.invitation .visual.active { right:-74px; top:-32px; }
.invitation .infotxt { position:relative; z-index:999; line-height:1.4; padding:30px 40px; background-color:rgba(0,0,0,.4) }
.invitation .infotxt .subject { font-size:1.4em; }
.invitation .infotxt .txt { margin-top:10px; }
.invitation .infotxt .txt li { padding:3px 0; }
.invitation .infotxt .txt span { font-weight:bold; }
.invitation .btn_invitation { position:absolute; right:30px; bottom:30px; }
@media screen and (max-width:767px) {
	.invitation { font-size:.9em }
	.invitation .state { padding:4.5% 30% 4.5% 4.5% }
	.invitation .infotxt { padding:4.5% }
	.invitation .infotxt .txt { margin-top:6px; }
	.invitation .visual { right:-35px; top:-35px; }
	.invitation .visual img { width:180px;}
	.invitation .visual.active { right:-20px; top:-20px; }
}