@charset "UTF-8";

div.mslider { margin: 0 0 20px 0; position: relative; user-select: none; }
div.mslider > h2 { color: #3C3C3B; text-align: center; font-weight: 500; }

@media only screen and (min-width:990px) {
	div.mslider > h2 { font-size: 25px; line-height: 30px; margin: 35px 0 35px 0; }
	div.mslider > ul { display: flex; flex-direction: row; width: 990px; margin: 0 auto 35px auto; padding: 0; list-style: none; }
	div.mslider > ul > li { flex: none; margin: 0; color: #B3B2B2; font-size: 18px; }
	div.mslider > ul > li.fill { margin: 0 auto; border-left: 1px solid #B3B2B2; }
	div.mslider > ul > li:first-child { margin: 0 auto 0 0; }
	div.mslider > ul > li:last-child { margin: 0 0 0 auto; }
	div.mslider > ul > li > a { color: #B3B2B2; cursor: pointer; font-size: 18px; }
	div.mslider > ul > li.act > a { color: #3CAA36; font-weight: 500; }
	div.mslider > ul > li > a:last-child { display: none; }
	div.mslider > a.prev { position: absolute; width: 24px; height: 48px; top: 50%; margin-top: -24px; left: 35px; background: url('arrow.left.svg') no-repeat center center; background-size: 24px 48px; cursor: pointer; }
	div.mslider > a.next { position: absolute; width: 24px; height: 48px; top: 50%; margin-top: -24px; right: 35px; background: url('arrow.right.svg') no-repeat center center; background-size: 24px 48px; cursor: pointer; }
	div.mslider > a.prev:hover { background-image: url('arrow.left.h.svg'); }
	div.mslider > a.next:hover { background-image: url('arrow.right.h.svg'); }
	div.mslider > div { }
	div.mslider > div > div { display: none; }
	div.mslider > div > div.act { display: block; position: relative; }
	div.mslider > div > div > div { width: 990px; margin: 0 auto; }
	div.mslider > div > div > div > div { display: none; width: 425px; height: 690px; padding: 5px 40px 5px 525px; box-shadow: 0 0 3px #666666; overflow: hidden; border-radius: 10px; position: relative; background-color: white; }
	div.mslider > div > div > div > div.act { display: block; }
	div.mslider > div > div > div > div h3 { color: #3C3C3B; font-weight: 500; font-size: 25px; margin: 0; padding: 20px 0 10px 0; text-align: center; }
	div.mslider > div > div > div > div p { color: #3C3C3B; font-weight: 400; font-size: 16px; margin: 0; padding: 10px 0 10px 0; text-align: justify; }
	div.mslider > div > div > div > div ul { padding: 0; list-style:none;  }
	div.mslider > div > div > div > div ul li { color: #3C3C3B; font-weight: 400; font-size: 16px; padding: 0 0 0 15px; margin-bottom: 5px; background: url("bullet.png") 0px 8px no-repeat; text-align: justify; }
	div.mslider > div > div > div > div ul.double-cols { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; }
	div.mslider > div > div > div > div ul.double-cols li { background: none; padding: 0; margin: 0; flex: 1 0 auto; width: 50%; line-height: 28px; vertical-align: middle; }
	div.mslider > div > div > div > div ul.double-cols li.wide { width: 100%; }
	div.mslider > div > div > div > div ul.double-cols li img { margin: 0 5px 0 0; vertical-align: middle; }
	div.mslider > div > div > div > div p.back img { position: absolute; left: 5px; top: 5px; width: 490px; height: 690px; }
	div.mslider > div > div > ul { position: absolute; list-style: none; margin: 0; padding: 0; bottom: 0; padding: 0; left: 605px; right: 120px; text-align: center; }
	div.mslider > div > div > ul li { display: inline-block; width: 10px; height: 10px; margin: 5px; border-radius: 5px; box-shadow: inset 0 0 2px #aaaaaa; background-color: #C0C3C6; cursor: pointer; }
	div.mslider > div > div > ul li.act { background-color: #939393; box-shadow: inset 0 0 3px #666666; }
}

@media only screen and (max-width:989px) {
	div.mslider > h2 { font-size: 20px; line-height: 25px; margin: 22px 0 22px 0; }
	
	div.mslider > a { display: none; }
	
	div.mslider > ul { margin: 0 20px 0 20px; padding: 0; list-style: none; }
	div.mslider > ul > li { margin: 5px 0 5px 0; padding: 0; }
	div.mslider > ul > li.fill { margin: 0; padding: 0; border-top: 1px solid #3CAA36; height: 0; background: none; }

	div.mslider > ul > li > a:first-child { display: block; color: black; cursor: pointer; font-size: 20px; font-weight: 500; height: 50px; line-height: 50px; vertical-align: middle; padding: 0 20px 0 0; background: url('arrow.svg') right center no-repeat; }
	div.mslider > div { display: none; }
	div.mslider > div > div { display: none; }
	div.mslider > div > div.act { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
	div.mslider > div > div > div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
	div.mslider > div > div > div > div { display: none; }
	div.mslider > div > div > div > div.act { display: block; position: absolute; overflow: auto; left: 0; right: 0; top: 0; bottom: 0; }
	
	div.mslider.opened { position: fixed; left: 0; right: 0; top: 50px; bottom: 30px; z-index: 2000; background-color: white; margin: 0; padding: 0; overflow: hidden; }
	div.mslider.opened > h2 { display: none; }
	div.mslider.opened > div { display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
	div.mslider.opened > ul { height: 0;}
	div.mslider.opened > ul > li { display: none; }
	div.mslider.opened > ul > li.act { margin: 0; padding: 0; display: block; position: fixed; left: 0; right: 0; top: 0; height: 50px; background-color: #3CAA36; }
	div.mslider.opened > ul > li.act > a { -webkit-tap-highlight-color: transparent; }
	div.mslider.opened > ul > li.act > a:first-child { display: block; position: absolute; left: 0; top: 0; height: 50px; right: 56px; color: white; padding: 0 20px 0 20px; overflow: hidden; }
	div.mslider.opened > ul > li.act > a:last-child { display: block; position: absolute; right: 0; top: 0; height: 50px; width: 56px; color: white; padding: 0; background: url('close.svg') no-repeat 21px center; background-size: 14px 14px; }

	div.mslider.opened > a { display: block; position: fixed; width: 32px; height: 64px; top: 50%; margin-top: -32px; overflow: hidden; background-color: rgba(255,255,255,0.7); background-repeat: no-repeat; background-size: 14px 28px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25); -webkit-tap-highlight-color: transparent; }
	div.mslider.opened > a.prev { left: 0; background-image: url('arrow.left.m.svg'); background-position: 5px center; border-radius: 0 32px 32px 0; }
	div.mslider.opened > a.next { right: 0; background-image: url('arrow.right.m.svg'); background-position: 13px center; border-radius: 32px 0 0 32px; }	
	
@media only screen and (min-width:490px) {
	div.mslider > div > div > div > div p.back { height: 690px; overflow: hidden; position: relative; }
	div.mslider > div > div > div > div p.back img { position: absolute; top: 0; left: 50%; width: 490px; height: 690px; margin-left: -245px; }
	div.mslider > div > div > div > div p.back:after { display: block; content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; border-radius: 10px 10px 0 0; overflow: hidden; background-color: white; box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.15); }
}

@media only screen and (max-width:489px) {
	div.mslider > div > div > div > div p.back { padding-top: 140%; overflow: hidden; position: relative; }
	div.mslider > div > div > div > div p.back img { position: absolute; top: 0; left: 0; width: 100%; }
	div.mslider > div > div > div > div p.back:after { display: block; content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 20px; border-radius: 10px 10px 0 0; overflow: hidden; background-color: white; box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.15); }
}
	
	div.mslider > div > div > div > div h3 { color: #3C3C3B; font-weight: 500; font-size: 20px; line-height: 24px; margin: 0; padding: 0 20px 10px 20px; text-align: center; }
	div.mslider > div > div > div > div p { color: #3C3C3B; font-weight: 400; font-size: 17px; line-height: 22px; margin: 0; padding: 10px 20px 10px 20px; text-align: justify; }
	div.mslider > div > div > div > div ul { padding: 0 20px 0 20px; list-style:none; }
	div.mslider > div > div > div > div ul li { color: #3C3C3B; font-weight: 400; font-size: 17px; line-height: 22px; padding: 0 0 0 15px; margin-bottom: 5px; background: url("bullet.png") 0px 8px no-repeat; text-align: justify; vertical-align: middle; }
	div.mslider > div > div > div > div ul li img { vertical-align: middle; margin: 0 5px 0 0; }
	
	div.mslider > div > div > ul { position: fixed; list-style: none; margin: 0; padding: 0; bottom: 0; height: 30px; padding: 0; left: 0; right: 0; text-align: center; background-color: #3CAA36; }
	div.mslider > div > div > ul li { display: inline-block; width: 10px; height: 10px; margin: 10px; border-radius: 5px; box-shadow: 0 0 3px black; background-color: #80d57b; cursor: pointer; }
	div.mslider > div > div > ul li.act { background-color: white; }
}