/* Banner1 */
.screenBanner {
width: 480px;
background-color: #f5c503;
border: 1px solid black;
position: relative;
font-family: sans-serif;
}
.screenBanner2 {
width: 480px;
background-color: white;
border: 1px solid #777;
position: relative;
font-family: sans-serif;
}
.screenBanner > .screenBannerImage img {
width: 100%;
padding-bottom: 10px;
}
.screenBanner > .screenBannerLogo img {
position: absolute;
top: 0;
left: 35%;
width: 150px;
height: 75px;
z-index: 99;
}
.screenBanner2 > .screenBannerHeader {
color: #2b497b;
font-size: 22px;
font-weight: bold;
text-align: center;
padding: 15px;
box-shadow: 0px -15px 50px -15px black inset;
}
.screenBanner > .screenBannerFooter, .screenBanner2 > .screenBannerFooter {
padding: 15px;
box-shadow: 0px 20px 50px -15px black inset;
}
.screenBanner > .screenBannerFooter > .screenBannerFooterText {
width: 60%;
float: left;
font-size: 20px;
font-weight: bold;
}
.screenBanner2 > .screenBannerFooter > .screenBannerFooterText {
width: 60%;
float: left;
font-size: 20px;
font-weight: bold;
}
.screenBanner > .screenBannerFooter > .screenBannerFooterIcon {
width: 40%; 
float: right;
text-align: right;
padding: 15px 0 15px 0;
} 
.screenBanner2 > .screenBannerFooter > .screenBannerFooterIcon {
width: 40%; 
float: right;
text-align: right;
}
.screenBanner > .screenBannerFooter > .screenBannerFooterIcon > .screenBannerButton {
background-color: #03427b;
padding: 15px 30px 15px 30px;
border: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: white;
text-decoration: none;
}
.screenBanner > .screenBannerFooter > .screenBannerFooterIcon > .screenBannerButton:hover {
background-color: white;
color: #03427b;
transition: 0.25s ease;
}
/* 3.3.2017 */
.screenBanner2 > .screenBannerFooter > .screenBannerFooterIcon2 {
position: absolute;
right: 20px;
bottom: 30px;
}
.screenBanner2 > .screenBannerFooter {
min-height: 120px;
}
.screenBanner2 > .screenBannerFooter > .screenBannerFooterIcon2 > .screenBannerButton {
background-color: #f5c503;
padding: 15px 30px 15px 30px;
border: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 3px 3px 10px #999;
color: black;
font-weight: bold;
text-decoration: none;
transition: 0.25s ease;
}
.screenBanner2 > .screenBannerFooter > .screenBannerFooterIcon2 > .screenBannerButton:hover {
background-color: #03427b;
color: white;
transition: 0.25s ease;
}
/************/
.screenBanner2 > .screenBannerFooter > .screenBannerFooterIcon img {
width: 60px;
height: 60px;
}
.screenBannerCleaner {
clear: both;
}
.screenBanner2 .slidesItem, .screenBanner .slidesItem {
position: absolute; bottom: 5px; left: 5px; width: 480px; font-size: 30px; color: #ffffff; line-height: 38px; background-color: rgba(0, 0, 0, 0.6); padding:15px;
}
/* 3.3.2017 */
.left {
float: left;
width: 80%;
}
.right {
float: right;
}
.arrow {
position: absolute;
top: 0;
right: 10px;
padding: 5px 14px 6px 15px;
margin-top: 9px;
border: 1px solid rgba(255, 255, 255, .5);
transition: 0.25s ease;
}
.arrow:hover {
border: 1px solid rgba(255, 255, 255, 1);
transition: 0.25s ease;
}
.arrow img {
width: 20px;
height: 20px;
}
/************/
/* jssor */
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05l.jssora05ldn (mousedown)
.jssora05r.jssora05rdn (mousedown)
.jssora05l.jssora05lds (disabled)
.jssora05r.jssora05rds (disabled)
*/
.jssora05l, .jssora05r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 40px;
cursor: pointer;
background: url('jssor/img/a17.png') no-repeat;
overflow: hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05l.jssora05ldn { background-position: -250px -40px; }
.jssora05r.jssora05rdn { background-position: -310px -40px; }
.jssora05l.jssora05lds { background-position: -10px -40px; opacity: .3; pointer-events: none; }
.jssora05r.jssora05rds { background-position: -70px -40px; opacity: .3; pointer-events: none; }
/* jssor slider thumbnail navigator skin 01 css *//*.jssort01 .p (normal).jssort01 .p:hover (normal mouseover).jssort01 .p.pav (active).jssort01 .p.pdn (mousedown)*/
.jssort01 .p { position: absolute; top: 0; left: 0; width: 72px; height: 72px;}
.jssort01 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.jssort01 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.jssort01 .c { position: absolute; top: 0px; left: 0px; width: 68px; height: 68px; border: #000 2px solid; box-sizing: content-box; background: url('jssor/img/t01.png') -800px -800px no-repeat; _background: none;}
.jssort01 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 68px; height: 68px; border: #000 0px solid; _border: #fff 2px solid; background-position: 50% 50%;}
.jssort01 .p:hover .c { top: 0px; left: 0px; width: 70px; height: 70px; border: #fff 1px solid; background-position: 50% 50%;}
.jssort01 .p.pdn .c { background-position: 50% 50%; width: 68px; height: 68px; border: #000 2px solid;}
* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c { /* ie quirks mode adjust */ width /**/: 72px; height /**/: 72px;}
/* banner 3*/
.screenBanner3 {
max-width: 970px;
max-height: 210px;
background-color: #f5c503;
border: 0px solid black;
position: relative;
font-family: sans-serif;
}
.screenBanner3 > .screenBannerHeader {
color: #2b497b;
font-size: 22px;
font-weight: bold;
text-align: center;
padding: 15px;
box-shadow: 0px -15px 50px -15px black inset;
}
.screenBanner3 > .screenBannerLogo img {
position: absolute;
top: 0;
left: 13%;
width: 150px;
height: 75px;
z-index: 99;
}
.screenBanner3 > .screenBannerFooter {
padding: 15px;
box-shadow: 0px 20px 50px -15px black inset;
}
.screenBanner3 > .screenBannerFooter > .screenBannerFooterText {
width: 60%;
float: left;
font-size: 20px;
font-weight: bold;
}
.screenBanner3 > .screenBannerFooter > .screenBannerFooterIcon {
width: 40%; 
float: right;
text-align: right;
padding: 15px 0 15px 0;
}
.screenBanner3 > .screenBannerFooter > .screenBannerFooterIcon > .screenBannerButton {
background-color: #03427b;
padding: 15px 30px 15px 30px;
border: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: white;
text-decoration: none;
}
.screenBanner3 > .screenBannerFooter > .screenBannerFooterIcon > .screenBannerButton:hover {
background-color: white;
color: #03427b;
transition: 0.25s ease;
}
.screenBanner3 .slidesItem {
position: absolute; bottom: 5px; right: 5px; width: 300px; font-size: 16px; color: #ffffff; line-height: 20px; background-color: rgba(0, 0, 0, 0.6); padding:5px;
}
/* jssor slider thumbnail navigator skin 01 css *//*.jssort01 .p (normal).jssort01 .p:hover (normal mouseover).jssort01 .p.pav (active).jssort01 .p.pdn (mousedown)*/
.screenBanner3 .jssort01 .p { position: absolute; top: 0; left: 0; width: 64px; height: 64px;}
.screenBanner3 .jssort01 .t { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;}
.screenBanner3 .jssort01 .w { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
.screenBanner3 .jssort01 .c { position: absolute; top: 0px; left: 0px; width: 62px; height: 62px; border: #000 1px solid; box-sizing: content-box; background: url('jssor/img/t01.png') -800px -800px no-repeat; _background: none;}
.screenBanner3 .jssort01 .pav .c { top: 2px; _top: 0px; left: 2px; _left: 0px; width: 62px; height: 62px; border: #000 0px solid; _border: #fff 1px solid; background-position: 50% 50%;}
.screenBanner3 .jssort01 .p:hover .c { top: 0px; left: 0px; width: 62px; height: 62px; border: #fff 1px solid; background-position: 50% 50%;}
.screenBanner3 .jssort01 .p.pdn .c { background-position: 50% 50%; width: 58px; height: 58px; border: #000 2px solid;}
* html .jssort01 .c, * html .jssort01 .pdn .c, * html .jssort01 .pav .c { /* ie quirks mode adjust */ width /**/: 58px; height /**/: 58px;}
.screenBanner3 .jssort01 {
background-color: rgb(36, 38, 46);
/*left: 400px;*/
}
.screenBanner3Info {
position: absolute;
width: 55%;
right: 0;
margin-top: 3%;
}
.screenBanner3Info .screenBanner3InfoText {
float:left;
width: 55%;
margin-right: 10%;
font-size: 25px;
color: #03427b;
}
.screenBanner3Info .screenBanner3InfoIcon {
float:left;
margin-top: 5%;
}
.screenBanner3Info .screenBanner3InfoIcon > .screenBannerButton {
background-color: #03427b;
padding: 15px 30px 15px 30px;
border: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
color: white;
text-decoration: none;
}
.screenBanner3Info .screenBanner3InfoIcon > .screenBannerButton:hover {
background-color: white;
color: #03427b;
transition: 0.25s ease;
}
@media (max-width: 900px) {
.screenBanner3Info .screenBanner3InfoText {
font-size: 20px;
}
.screenBanner3Info .screenBanner3InfoIcon .screenBannerButton {
font-size: 14px;
padding: 10px 20px 10px 20px;
}
.screenBanner3 > .screenBannerLogo img {
left: 15%;
width: 100px;
height: 50px;
}
}
@media (max-width: 760px) {
.screenBanner3Info .screenBanner3InfoText {
font-size: 18px;
}
.screenBanner3Info .screenBanner3InfoIcon .screenBannerButton {
font-size: 14px;
padding: 10px 20px 10px 20px;
}
.screenBanner3 > .screenBannerLogo img {
left: 15%;
width: 100px;
height: 50px;
}
}
@media (max-width: 640px) {
.screenBanner3 {
display: none;
}
}