@charset "utf-8";
/* CSS Document */

*{ margin:0; padding:0;}
html{ background:#fff; height:100%; font-family: 'Source Sans Pro', arial, sans-serif; color:#6b739c;}
ul, ol{ list-style:none;}
a, img{ text-decoration:none; outline:none;}
.container{ height:auto; width:100%; max-width:1170px; padding:15px; box-sizing:border-box; margin:0 auto; text-align:center;}
.container > h1{ text-align:center; font-weight:600; color:#042e6f; font-size:36px; letter-spacing:-.5px;}
.container > h2{ text-align:center; font-weight:400; color:#6b739c; font-size:16px; margin-top:10px;}
.container > span{ height:5px; width:140px; text-align:center; background:#C70039; display:inline-block; margin-top:35px; border-radius:2px;}

.wrapper{ height:auto; width:100%; margin:45px 0; display:grid; grid-gap:60px; 
grid-template-columns:calc(50% - 185px) 250px calc(50% - 185px);}
.wrapper > .center{ height:auto; width:100%; max-width:250px; max-height:519px; background: #fff; box-shadow:0 24px 48px rgba(0,0,0,.1); border-radius:32px; overflow:hidden; position:relative;}
.wrapper > .center > img{ display:block; width:100%;}
.wrapper > .center > .centercontent{ height:auto; width:100%; display:flex; flex-flow:column; align-items:center; padding:40px 30px; box-sizing:border-box; position:absolute; top:0;}
.wrapper > .center > .centercontent > li{ height:auto; width:100%; text-align:center;}
.wrapper > .center > .centercontent > li > img{ display:inline-block; width:100%; max-width:140px;}
.wrapper > .center > .centercontent > li > .video{ height:auto; width:100%; box-shadow:0 8px 16px rgba(0,0,0,.1); border-radius:12px; position:relative; overflow:hidden; background:#aaa;}
.wrapper > .center > .centercontent > li > .video > img{ display:block; width:100%;}
.wrapper > .center > .centercontent > li > h1{ text-align:center; text-transform:uppercase; letter-spacing:2px; color:#6b739c; padding:10px 0; font-weight:400; font-size:12px;}
.wrapper > .center > .centercontent > li > .video > a{ display:block; height:48px;  width:48px; border-radius:50%; overflow:hidden; position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; opacity:.7;}
.wrapper > .center > .centercontent > li > .video > a:hover{ opacity:.95;}
.wrapper > .center > .centercontent > li > .video > a > img{ display:block; width:100%;}
.wrapper > .center > .centercontent > li > p{ height:auto; width:100%; display:flex; flex-flow:row nowrap; align-items:flex-start; margin-top:30px;}
.wrapper > .center > .centercontent > li > p:nth-child(2){ margin-top:15px;}
.wrapper > .center > .centercontent > li > p:nth-child(2) > span{ background:#fc5337;}
.wrapper > .center > .centercontent > li > p > span{ height:24px; width:24px; background:#32c75c; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; margin-right:10px;}
.wrapper > .center > .centercontent > li > p > span > img{ display:block; width:100%; max-width:14px;}
.wrapper > .center > .centercontent > li > p > i{ display:inline-block; text-align:left; font-weight:600; color:#384368; font-size:16px; font-style:normal;}
.wrapper > .center > .centercontent > li > p:nth-child(2) > i{ font-size:14px; font-weight:400;}

.wrapper > .left, .wrapper > .center, .wrapper > .right{ height:auto; width:100%;}
.wrapper > .left > ul, .wrapper > .right > ul{ height:auto; width:100%;  display:flex; flex-flow:column; align-items:center;}
.wrapper > .left > ul > li, .wrapper > .right > ul > li{ height:auto; width:100%; margin:25px 0;}
.wrapper > .left > ul > li > a, .wrapper > .right > ul > li > a{ display:block; width:100%; background:#C70039; border-radius:10px; overflow:hidden;}
.wrapper > .left > ul > li > a:hover > h1, .wrapper > .right > ul > li > a:hover > h1, .wrapper > .left > ul > li > a:hover > dl > dt:nth-child(1), .wrapper > .right > ul > li > a:hover > dl > dt:nth-child(1){ background:#042e6f;}
.wrapper > .left > ul > li > a > h1, .wrapper > .right > ul > li > a > h1{ text-align:left; color:#fff; padding:5px 10px; box-sizing:border-box; font-weight:600; font-size:18px; letter-spacing:-.5px; line-height:18px;}
.wrapper > .left > ul > li > a > dl, .wrapper > .right > ul > li > a > dl{ height:auto; width:100%; display:grid; grid-gap:15px; grid-template-columns:62px calc(100% - 82px); background:#f2f3f9; padding:15px; box-sizing:border-box;}
.wrapper > .left > ul > li > a > dl > dt, .wrapper > .right > ul > li > a > dl > dt{ text-align:left; 
font-size:13px; color:#6b739c;}
.wrapper > .left > ul > li > a > dl > dt:nth-child(1), .wrapper > .right > ul > li > a > dl > dt:nth-child(1){ height:auto; width:100%; border-radius:10px; overflow:hidden; background:#C70039;}
.wrapper > .left > ul > li > a > dl > dt:nth-child(1) > img, .wrapper > .right > ul > li > a > dl > dt:nth-child(1) > img{ display:block; width:100%;}
.wrapper > .left > ul > li > a > dl > dt > b, .wrapper > .right > ul > li > a > dl > dt > b{ color:#394367; font-weight:400;}

.lightboxcontainer {
  width:100%;
  text-align:left;
}
.lightboxcontainer iframe {
  min-height: 390px;
}

@media (max-width:1024px){
	.wrapper{ height:auto; width:100%; margin:45px 0; display:grid; grid-gap:25px; 
grid-template-columns:calc(50% - 150px) 250px calc(50% - 150px);}
	.wrapper > .left > ul > li, .wrapper > .right > ul > li{ margin:10px 0;}
	.wrapper > .left > ul > li > a > dl, .wrapper > .right > ul > li > a > dl{ grid-template-columns:100%; 
	grid-gap:0px;}
	.wrapper > .left > ul > li > a > dl > dt:nth-child(1), .wrapper > .right > ul > li > a > dl > dt:nth-child(1){
		width:62px; margin-bottom:15px;}
	}

@media (max-width:768px){
	.wrapper{ height:auto; width:100%; align-items:center; margin:45px 0 0 0; display:grid; grid-gap:0px; 
	grid-template-columns:100%;}
	.container{ padding:30px 15px 15px 15px;}
	.wrapper > .left > ul > li, .wrapper > .right > ul > li{ margin:15px 0;}
	.wrapper > .center{ grid-area:1 / 1; margin:0 auto 30px auto;}
	.wrapper > .left{ grid-area:2 / 1;}
	.wrapper > .right{ grid-area:3 / 1;}
	.wrapper > .left > ul, .wrapper > .right > ul{ flex-flow:row nowrap; align-items:flex-start;}
	.wrapper > .left > ul > li, .wrapper > .right > ul > li{ padding:0 5px; box-sizing:border-box;}
	.wrapper > .left > ul > li > a > dl, .wrapper > .right > ul > li > a > dl{ grid-template-columns:100%; 
	grid-gap:0px;}
	.wrapper > .left > ul > li > a > dl > dt:nth-child(1), .wrapper > .right > ul > li > a > dl > dt:nth-child(1){
		width:62px; margin-bottom:15px;}
	}

@media (max-width:560px){
	.wrapper{ height:auto; width:100%; align-items:center; margin:45px 0 0 0; display:grid; grid-gap:0px; 
	grid-template-columns:100%;}
	.container{ padding:30px 15px 15px 15px;}
	.wrapper > .left > ul, .wrapper > .right > ul{ flex-flow:column;}
	.wrapper > .left > ul > li, .wrapper > .right > ul > li{ margin:15px 0;}
	.wrapper > .center{ grid-area:1 / 1; margin:0 auto 30px auto;}
	.wrapper > .left{ grid-area:2 / 1;}
	.wrapper > .right{ grid-area:3 / 1;}
	.wrapper > .left > ul > li > a > dl, .wrapper > .right > ul > li > a > dl{ grid-template-columns:62px calc(100% - 72px); grid-gap:10px;}
	.wrapper > .left > ul > li > a > dl > dt:nth-child(1), .wrapper > .right > ul > li > a > dl > dt:nth-child(1){
		width:62px; margin-bottom:15px;}
	}