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

.swiper-container {
width:100%;
height: 100vh;
height:700px;
overflow:visible !important;
}
@media only screen and (max-width:680px){
.swiper-container {
height:400px;
}
}
@media only screen and (max-width:480px){
.swiper-container {
height:auto;
}
}


.swiper-wrapper .swiper-slide {
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
height: 700px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
background-position: right
}


@media only screen and (max-width:680px){
.swiper-wrapper .swiper-slide {
height:400px;
}
}

.swiper-wrapper .swiper-slide::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0);
}


.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    list-style: none;
    padding: 0;
    z-index: 1;
}



.txt_area{
 position: relative;
top:48%;
left:calc(50% + 0px);
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
width: 100%;
text-align: center;
color: #fff;
} 
@media only screen and (max-width:767px){
.txt_area{
left:calc(50% + 0px);
}
}

@media only screen and (max-width:680px){
.txt_area{
top:55%;
}
}

.txt_area h3{
font-size: 40px;
margin-bottom: 15px;
letter-spacing: -.01em;
font-weight:900;
line-height:1.5;
}

@media only screen and (max-width:767px){
.txt_area h3{
font-size:32px;
}
}
@media only screen and (max-width:560px){
.txt_area h3{
font-size:26px;
margin-bottom: 25px;
}
}

.txt_area h4{
font-size: 24px;
margin-bottom: 50px;
letter-spacing: -.01em;
font-weight:700;
}
@media only screen and (max-width:767px){
.txt_area h4{
font-size:20px;
}
}
@media only screen and (max-width:560px){
.txt_area h4{
font-size:18px;
margin-bottom: 30px;
}
}

.txt_area ul{
overflow:hidden;
width:632px;
margin:0 auto;
}
@media only screen and (max-width:680px){
.txt_area ul{
width:70%;
max-width:632px;
}
}
.txt_area li{
float:left;
padding:7px 0;
color:#fff;
font-size:22px;
font-weight:bold;
text-align:center;
width:142px;
margin:0 8px;
}
@media only screen and (max-width:680px){
.txt_area li{
width:46%;
margin:1% 1%;
font-size:16px;
padding:5px 0;
}
}

.txt_area li:first-child{
background-color:#3fa7af;
}
.txt_area li:nth-child(2){
background-color:#ea775c;
}
.txt_area li:nth-child(3){
background-color:#e6bd62;
letter-spacing:-0.6px;
}
.txt_area li:last-child{
background-color:#3f84af;
}


.txt_area .txt{
font-size: 18px;
 position: relative;
left:calc(0% - 30px);
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
-ms-transform: translateY(-50%) translateX(-50%);
}
@media only screen and (max-width:767px){
.txt_area .txt{
font-size: 16px;
left:calc(0% - 0px);
}
}
@media only screen and (max-width:580px){
.txt_area .txt{
font-size:14px;
}
}

span.fadein_ico{
position: absolute;
left:calc(50% - 415px);
top:16px;
}
@media only screen and (max-width:1023px){
span.fadein_ico{
left:calc(50% - 360px);
top:8px;
}
}
@media only screen and (max-width:767px){
span.fadein_ico{
display: none
}
}



.fadein {
opacity: 0;
animation: fadeup 1.5s ease forwards;
}
@keyframes fadeup {
from {
    opacity: 0;
	transform: translateY(100px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}


.txt.fadein span{

}

#summery{
position: absolute;
width: 100%;
bottom: 0;
background-color: rgba(35,32,31,0.7);
color: #f3f3f3;
z-index: 9999;
padding: 22px 20px;
overflow: hidden;
line-height: 1.8;
text-align: center;
}

@media only screen and (max-width:480px){
#summery{
position: relative;
font-size:14px;
position:inherit;
background-color: rgba(35,32,31,1.0);
}
}



h3{animation-delay: 1s;}
.txt {animation-delay: 1.1s;}
#summery{animation-delay: 2.2s;}