html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;}
tr, th, td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
background:transparent;}
body {
line-height:1;}
:focus {
outline: 1;}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary {
display:block;}
nav ul {
list-style:none;}
blockquote, q {
quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;}
a {
margin:0;
padding:0;
border:0;
font-size:100%;
vertical-align:baseline;
background:transparent;}
ins {
background-color:#ff9;
color:#000;
text-decoration:none;}
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;}
del {
text-decoration: line-through;}
abbr[title], dfn[title] {
border-bottom:1px dotted #000;
cursor:help;}
table {
border-collapse:collapse;
border-spacing:0;}
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;}
input, select {
vertical-align:middle;}
li{
list-style:none;}
#HopeSlider{
overflow: hidden;
border-bottom:solid #1e498a;}
.dot-list{
position: absolute;
left: 50%;
bottom: 20px;
z-index: 5;
margin-left: -88px;}
.dot-list .dot{
display: inline-block;
margin: 0 5px;
background-color: #fff;
border-radius: 5px;
width:10px;
height:10px;}
.dot-list .dot.active{
background-color: #1e498a;
color: #fff;}
#prev{
position: absolute;
left: -50px;
top: 0;
width: 50px;
height: 100%;
background: url(../images/slider/arl.png) no-repeat center;
z-index: 5;}
#next{
position: absolute;
right: -50px;
top: 0;
width: 50px;
height: 100%;
background: url(../images/slider/arr.png) no-repeat center;
z-index: 5;}
#prev,#next{
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
transition: all ease 0.3s;
cursor: pointer;}
#HopeSlider:hover #prev{
left: 0;}
#HopeSlider:hover #next{
right: 0;}
.animate{
position: absolute;
z-index: 2;}
}
#ie .animate{
opacity: 1;}
.slidertext1{
display:block;
width: 479px;
height: 134px;}
.slidertext2{
display:block;
width:862px;
height:202px;}
.slidertext3{
display:block;
width: 809px;
height: 90px;}
.slidertext4{
display:block;
width:362px;
height:150px;}
.slidertext5{
display:block;
width:512px;
height:69px;}
.slidertext6{
display:block;
width:505px;
height:82px;}
.slidertext7{
display:block;
width: 381px;
height: 191px;}
.slidertext1_768{
display: none;}
.left-in{
-webkit-animation: animate-left-in 3s cubic-bezier(.08,.8,0,.85);
-o-animation: animate-left-in 3s cubic-bezier(.08,.8,0,.85);
animation: animate-left-in 3s cubic-bezier(.08,.8,0,.85);
animation-fill-mode: forwards;}
.left-out.animate{
-webkit-animation: animate-left-out .7s;
-o-animation: animate-left-out .7s;
animation: animate-left-out .7s;
animation-fill-mode: forwards;
opacity: 1;}
.right-in{
-webkit-animation: animate-right-in 3s cubic-bezier(.08,.8,.5,.85);
-o-animation: animate-right-in 3s cubic-bezier(.08,.8,.5,.85);
animation: animate-right-in 3s cubic-bezier(0.08,.8,.5,.85);
animation-fill-mode: forwards;}
.right-out.animate{
-webkit-animation: animate-right-out .7s;
-o-animation: animate-right-out .7s;
animation: animate-right-out .7s;
animation-fill-mode: forwards;
opacity: 1;}
@keyframes animate-left-in {
0%{
transform: translateX(-2560px);
opacity: 1;}
20%{
transform: translateX(-800px);
opacity: 1;}
90%{
transform: translateX(5px);
opacity: 1;}
100%{
transform: translateX(0px);
opacity: 1;}
}
@-webkit-keyframes animate-left-in {
0%{
transform: translateX(-2560px);
opacity: 1;}
20%{
transform: translateX(-800px);
opacity: 1;}
90%{
transform: translateX(5px);
opacity: 1;}
100%{
transform: translateX(0px);
opacity: 1;}
}
@keyframes animate-right-in {
0%{
transform: translateX(2560px);
opacity: 1;}
20%{
transform: translateX(800px);
opacity: 1;}
90%{
transform: translateX(-5px);
opacity: 1;}
100%{
transform: translateX(0px);
opacity: 1;}
}
@-webkit-keyframes animate-right-in {
0%{
transform: translateX(2560px);
opacity: 1;}
20%{
transform: translateX(800px);
opacity: 1;}
90%{
transform: translateX(-5px);
opacity: 1;}
100%{
transform: translateX(0px);
opacity: 1;}
}
@keyframes animate-left-out {
from{
transform: translateX(0);
opacity: 1;}
to{
transform: translateX(-2560px);
opacity: 0;}
}
@-webkit-keyframes animate-left-out {
from{
transform: translateX(0);
opacity: 1;}
to{
transform: translateX(-2560px);
opacity: 0;}
}
@keyframes animate-right-out {
from{
transform: translateX(0);
opacity: 1;}
to{
transform: translateX(2560px);
opacity: 0;}
}
@-webkit-keyframes animate-right-out {
from{
transform: translateX(0);
opacity: 1;}
to{
transform: translateX(2560px);
opacity: 0;}
}
@media screen and (max-width:2561px) and (min-width:1921px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform: scale(1);}
.slidertext2{
transform:scale(1);}
.slidertext3{
transform:scale(1);}
.slidertext4{
transform:scale(1.1);}
.slidertext5{
transform:scale(1.4);}
.slidertext6{
transform:scale(1.4);}
.slidertext7{
transform:scale(1);}
.animate.type01{
right: 28%;
top: 22%;}
.animate.type02{
left: 12%;
top: 47%;}
.animate.type03{
right: 23%;
top: 47%;}
.animate.type04{
right: 20%;
top: 27%;}
.animate.type05{
right: 25%;
top: 36%;}
.animate.type06{
right: 19%;
top: 40%;}
.animate.type07{
right: 38%;
top: 33%;}}
@media screen and (max-width:1920px) and (min-width:1442px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform:scale(0.75);}
.slidertext2{
transform:scale(0.75);}
.slidertext3{
transform:scale(0.75);}
.slidertext4{
transform:scale(0.8);}
.slidertext5{
transform:scale(0.95);}
.slidertext6{
transform:scale(0.95);}
.slidertext7{}
.animate.type01{
right: 22%;
top: 23%;}
.animate.type02{
left: 10%;
top: 42%;}
.animate.type03{
right: 5%;
top: 50%;}
.animate.type04{
right: 15%;
top: 18%;}
.animate.type05{
right: 17%;
top: 30%;}
.animate.type06{
right: 13%;
top: 30%;}
.animate.type07{
right: 37%;
top: 28%;
transform: scale(0.8);}}
@media screen and (max-width:1441px) and (min-width:1367px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform:scale(0.6);}
.slidertext2{
transform:scale(0.6);}
.slidertext3{
transform:scale(0.6);}
.slidertext4{
transform:scale(0.6);}
.slidertext5{
transform:scale(0.75);}
.slidertext6{
transform:scale(0.75);}
.slidertext7{}
.animate.type01{
right: 20%;
top: 21%;}
.animate.type02{
left: 8%;
top: 40%;}
.animate.type03{
right: 0%;
top: 46%;}
.animate.type04{
right: 13%;
top: 10%;}
.animate.type05{
right: 12%;
top: 28%;}
.animate.type06{
right: 8%;
top: 30%;}
.animate.type07{
right: 43%;
top: 25%;
transform: scale(.8);}}
@media screen and (max-width:1366px) and (min-width:1282px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform:scale(0.55);}
.slidertext2{
transform:scale(0.55);}
.slidertext3{
transform:scale(0.55);}
.slidertext4{
transform:scale(0.6);}
.slidertext5{
transform:scale(0.7);}
.slidertext6{
transform:scale(0.7);}
.slidertext7{}
.animate.type01{
right: 18%;
top: 20%;}
.animate.type02{
left: 1%;
top: 34%;}
.animate.type03{
right: 0%;
top: 45%;}
.animate.type04{
right: 10%;
top: 15%;}
.animate.type05{
right: 10%;
top: 28%;}
.animate.type06{
right: 8%;
top: 30%;}
.animate.type07{
right: 43%;
top: 18%;
transform: scale(.8);}}
@media screen and (max-width:1281px) and (min-width:1206px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform:scale(0.5);}
.slidertext2{
transform:scale(0.5);}
.slidertext3{
transform:scale(0.5);}
.slidertext4{
transform:scale(0.5);}
.slidertext5{
transform:scale(0.65);}
.slidertext6{
transform:scale(0.65);}
.slidertext7{}
.animate.type01{
right: 17%;
top: 24%;}
.animate.type02{
left: 3%;
top: 37%;}
.animate.type03{
right: -4%;
top: 45%;}
.animate.type04{
right: 10%;
top: 15%;}
.animate.type05{
right: 10%;
top: 28%;}
.animate.type06{
right: 6%;
top: 30%;}
.animate.type07{
right: 42%;
top: 20%;
transform: scale(.8);}}
@media screen and (max-width:1205px) and (min-width:1025px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform:scale(0.65);}
.slidertext2{
transform:scale(0.65);}
.slidertext3{
transform:scale(0.65);}
.slidertext4{
transform:scale(0.7);}
.slidertext5{
transform:scale(0.9);}
.slidertext6{
transform:scale(0.9);}
.slidertext7{}
.animate.type01{
right: 18%;
top: 28%;}
.animate.type02{
left: -8%;
top: 37%;}
.animate.type03{
right: -6.5%;
top: 48%;}
.animate.type04{
right: 7%;
top: 20%;}
.animate.type05{
right: 13%;
top: 35%;}
.animate.type06{
right: 9%;
top: 35%;}
.animate.type07{
right: 45%;
top: 24%;}}
@media screen and (max-width:1024px) and (min-width:961px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform:scale(0.6);}
.slidertext2{
transform:scale(0.6);}
.slidertext3{
transform:scale(0.6);}
.slidertext4{
transform:scale(0.6);}
.slidertext5{
transform:scale(0.75);}
.slidertext6{
transform:scale(0.75);}
.slidertext7{}
.animate.type01{
right: 15.5%;
top: 26%;}
.animate.type02{
left: -9%;
top: 36%;}
.animate.type03{
right: 1%;
top: 45%;}
.animate.type04{
right: 3%;
top: 15%;}
.animate.type05{
right: 10%;
top: 35%;}
.animate.type06{
right: 3%;
top: 37%;}
.animate.type07{
right: 47%;
top: 21%;
transform: scale(.8);}}
@media screen and (max-width:960px) and (min-width:770px){
.slidertext1{
display: none;}
.slidertext1_768{
display: block;
width: 596px;
height: 67px;
transform:scale(0.6);}
.slidertext2{
transform:scale(0.6);}
.slidertext3{
transform: scale(0.6);}
.slidertext4{
transform:scale(0.6);}
.slidertext5{
transform:scale(0.8);}
.slidertext6{
transform:scale(0.8);}
.slidertext7{}
.animate.type01{
right: 11%;
top: 24%;}
.animate.type02{
left: -11%;
top: 28%;}
.animate.type03{
right: -8.5%;
top: 44%;}
.animate.type04{
right: 1%;
top: 85%;}
.animate.type05{
right: 8%;
top: 40%;}
.animate.type06{
right: 3%;
top: 63%;}
.animate.type07{
right: 49%;
top: 17%;
transform: scale(.8);}}
@media screen and (max-width:769px) and (min-width:640px){
.slidertext1{
transform:scale(0.8);}
.slidertext2{
display:none;}
.slidertext2_768{
display:block;
width:443px;
height:165px;
transform:scale(0.8);}
.slidertext3_768{
display: block;
width: 409px;
height: 125px;
transform: scale(0.8);}
.slidertext3{
display:none;}
.slidertext4{
transform:scale(0.6);}
.slidertext5{
transform:scale(0.65);}
.slidertext6{
transform:scale(0.65);}
.slidertext7{}
.animate.type01{
right: -3%;
top: 27%;}
.animate.type02{
left: 2%;
top: 34%;}
.animate.type03{
right: 5%;
top: 43%;}
.animate.type04{
right: -6%;
top: 10%;}
.animate.type05{
right: 1%;
top: 30%;}
.animate.type06{
right: 5%;
top: 35%;}
.animate.type07{
right: 58%;
top: 25%;
transform: scale(.8);}}
@media screen and (max-width:639px) and (min-width:500px){
.slidertext1{
transform:scale(0.8);}
.slidertext2{
display:none;}
.slidertext2_768{
display:block;
width:443px;
height:165px;
transform:scale(0.8);}
.slidertext3_768{
display: block;
width: 409px;
height: 125px;
transform: scale(0.8);}
.slidertext3{
display:none;}
.slidertext4{
transform:scale(0.6);}
.slidertext5{
transform:scale(0.65);}
.slidertext6{
transform:scale(0.65);}
.slidertext7{}
.animate.type01{
right: -4%;
top: 27%;}
.animate.type02{
left: -4%;
top: 32%;}
.animate.type03{
right: -6%;
top: 43%;}
.animate.type04{
right: -6%;
top: 10%;}
.animate.type05{
right: 1%;
top: 30%;}
.animate.type06{
right: 5%;
top: 35%;}
.animate.type07{
right: 64%;
top: 18%;
transform: scale(.8);}
}
@media screen and (max-width:499px){
.animate{
display:none;}
}
.slidertext2017{
display: block;
width: 1146px;
height: 314px;}
.animate.type2017{
right: 50%;
top: 50%;
margin-right: -685px;
margin-top: -157px;}
@media screen and (max-width: 1920px) {
.animate.type2017{
right: 50%;
top: 50%;
margin-right: -620px;
margin-top: -140px;}
.slidertext2017{
display: block;
width: 960px;
height: 236px;
background-size: 86%;
background-repeat: no-repeat;}
}
@media screen and (max-width: 1366px) {
.animate.type2017{
right: 50%;
top: 50%;
margin-right: -713px;
margin-top: -95px;}
.slidertext2017{
display: block;
width: 960px;
height: 236px;
background-size: 65%;
background-repeat: no-repeat;}
}
@media screen and (max-width: 1024px){
.animate.type2017{
right: 50%;
top: 50%;
margin-right: -725px;
margin-top: -88px;}
.slidertext2017{
display: block;
width: 960px;
height: 236px;
background-size: 60%;
background-repeat: no-repeat;}
}
@media screen and (max-width: 768px){
.slidertext2017{
display: none;}
}