/*
    reset css
*/

sub{
   vertical-aling:sub;
   font-size:smaller;

}



tr, th, td {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    background:transparent;}




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 #077430;}

.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: #077430;
    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;}
}

/* 2017脙茠脝鈥櫭冣�脗楼脙茠脗垄脙垄芒鈧∶偮冣�脗娄脙茠芒鈧犆兟⒚⑩�卢芒鈥灺⒚兤捗嗏�脙鈥毭偮γ兤捗偮⒚兟⒚⑩偓拧脗卢脙垄芒鈥毬偮澝兤捗⑩偓拧脙鈥毭偮lide脙茠脝鈥櫭冣�脗娄脙茠芒鈧∶冣�脗聽脙茠芒鈧∶冣�脗路脙茠脝鈥櫭冣�脗楼脙茠芒鈧∶冣�脗录脙茠芒鈧∶冣�脗聫 / 脙茠脝鈥櫭冣�脗搂脙茠脗垄脙垄芒鈧∶偮冣�脗聺脙茠芒鈧∶冣�脗篓脙茠脝鈥櫭冣�脗楼脙茠芒鈧∶冣�脗庐脙茠芒鈧γ兟⒚⑩�卢芒鈥灺⒚兤捗嗏�脙鈥毭偮ッ兤捗⑩偓拧脙鈥毭偮惷兤捗⑩偓娄脙鈥毭偮矫兤捗嗏�脙鈥毭偮ッ兤捗⑩偓鹿脙垄芒鈥毬偮犆兤捗⑩偓拧脙鈥毭偮犆兤捗嗏�脙鈥毭偮┟兤捗偮⒚兟⒚⑩�卢脜戮脙鈥毭偮⒚兤捗⑩偓拧脙鈥毭偮�*/

.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;}
}