.main { overflow: hidden; }

.visual{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack:end; -ms-flex-pack:end; justify-content:flex-end;
    position: relative; height: 780px; text-align: center;
    background: linear-gradient(125deg, rgba(56,205,232,1) 0%, rgba(6,134,224,1) 100%);
}
.visual .cloud{
    z-index: 1; position: absolute; top:30px; left: 0; width: 100%; height: 100%;
    background: url('/child/img/main/visual-cloud.png') no-repeat 30% center;
}
.visual .text { display: inline-block; z-index: 2; position: relative; margin-bottom: 30px; text-align: left; }
.visual .text h2 { line-height: 1; font-size: 60px; font-family: Arial; font-weight: bold; color: #ffffff; }
.visual .text p { font-size: 28px; color: #ffffff; }
.visual .image { display: inline-block; z-index: 2; position: relative; }
.visual .image::before,
.visual .image::after{
    content: ''; position: absolute; top: 50%; width: 278px; height: 85px;
    background-repeat: no-repeat; background-size: auto 100%;
}
.visual .image::before { left: -40%; background-image: url('/child/img/main/visual-image-left-symbol.png'); }
.visual .image::after { right: -40%; background-image: url('/child/img/main/visual-image-right-symbol.png'); }
.visual .image img { display: block; }
@media(max-width:1200px){
    .visual .text h2 { font-size: 40px; }
    .visual .text p { font-size: 24px; }
    .visual .image { max-width: 600px; }
}
@media(max-width:768px){
    .visual { min-height: 500px; height: calc(100vh - 120px); }
    .visual .text { padding: 0 30px; }
    .visual .text h2 { margin-bottom: 60px; line-height: 1.1; font-size: 30px; }
    .visual .text p { margin-top: 10px; font-size: 18px; }
    .visual .cloud { background-size: auto 200px; }
    .visual .image { padding: 0 30px; }
}


.section--intro { padding: 200px 0 220px; }
.intro-container{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.intro:first-child { text-align: right; }
.intro h2 { /*line-height: 1;*/ line-height:1.4;/*font-size: 28px;*/ font-size:20px; font-weight: 300; }
.intro h2 b { font-weight: 700; }
.intro h2 em { display: inline-block; position: relative; margin-bottom: 14px; padding-bottom: 6px; font-style: normal; font-size: 26px; color: #157fff; font-weight: 700; }
.intro h2 em::before { content: ''; position: absolute; bottom: 0; left: 2px; width: 20px; height: 3px; background: #e3e3e3; }
.intro ul{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin: 40px -45px 0;
}
.intro li { padding: 0 45px; line-height: 1.4; text-align: center; font-size: 18px; color: #777777; }
.intro .icon{
    display: -webkit-inline-flex; display: -ms-inline-flex; display: inline-flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
    margin-bottom: 10px; padding: 20px; width: 90px; height: 90px; color: #ffffff;
    border-radius: 50%; background: #157fff;
}

.intro .icon svg {width:100%; height:100%;}

@media(max-width:1200px){
    .section--intro { padding: 160px 0; }
    .intro h2 em { font-size: 20px; }
    .intro h2 { font-size: 16px; }
    .intro ul { margin: 40px -30px 0; }
    .intro li { padding: 0 30px; font-size: 14px; }
    .intro .icon { width: 80px; height: 80px; }
}
@media(max-width:768px){
    .section--intro { padding: 80px 0; }
    .intro-container{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    }
    .intro { margin-top: 45px; text-align: center; }
    .intro:first-child { margin-top: 0; text-align: center; }
    .intro ul{
        display: -webkit-inline-flex; display: -ms-inline-flex; display: inline-flex;
        margin: 25px auto 0; max-width: 550px;
    }
    .intro li { padding: 0 15px; width: 33.33333%; }
    .intro h2 em { font-size: 14px; }
    .intro h2 { font-size: 16px; }
    .intro .icon { padding: 15px; width: 60px; height: 60px; }
}


.section--feature { padding: 130px 0 160px; background: url('/child/img/main/section-feature-background.jpg') no-repeat center; }
.feature { text-align: center; }
.feature h2 { font-size: 40px; font-weight: 100; color: #ffffff; }
.feature h2 b { font-weight: 700; }
.feature h2 + p { margin: 34px 0 80px; line-height: 1.8; font-size: 18px; color: #ffffff; }
.feature ul{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    margin: -13px;
}
.feature li { flex: 1 1; padding: 13px; text-align: left; }
.feature li a{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;
    padding: 42px 50px 48px; border: 1px solid #fff; border-radius: 15px;
    justify-content:space-between;

}
.feature li p { line-height: 1; /*font-size: 20px;*/ font-size:18px; color: #fff; }
.feature li p:first-child { margin-bottom: 10px; font-size: 38px; }
.feature li em { margin-left: 45px; line-height: 1; font-style: normal; font-size: 18px; color: #ffffff; }
@media(max-width:1200px){
    .feature h2 { font-size: 32px; }
    .feature h2 + p { margin: 24px 0 50px; font-size: 16px; }
    .feature li a{ padding: 34px 26px 38px; }
    .feature li p:first-child { font-size: 30px; }
    .feature li p { font-size: 16px; }
    .feature li em { font-size: 16px; }
}
@media(max-width:768px){
    .section--feature { padding: 80px 0; }
    .feature h2 { font-size: 20px; }
    .feature h2 + p { font-size: 14px; }
    .feature ul{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
    }
    .feature li a{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
        padding: 24px 24px 28px;
    }
    .feature li p:first-child { font-size: 24px; }
    .feature li p { font-size: 13px; }
    .feature li em { margin: 30px 0 0; font-size: 13px; }
}


.section--awards { padding: 150px 0; }
.awards ul{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: -40px -25px;
}
.awards li{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    width: 33.33333%; padding: 40px 25px;
}
.awards li p { flex: 1 1; margin-left: 20px; font-size: 16px; color: #777777; }
.awards li b { font-size: 18px; color: #09ada0; }
@media(max-width:1200px){
    .awards ul { margin: -40px -10px; }
    .awards li { padding: 40px 10px; }
    .awards li p { font-size: 14px; }
    .awards li img { width: 70px; height: auto; }
}
@media(max-width:768px){
    .section--awards { padding: 100px 0; }
    .awards ul { margin: -25px -10px; }
    .awards li{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
        padding: 25px 10px; width: 50%;
    }
    .awards li p { margin: 10px 0 0; }
}


.board { padding: 120px 0 140px; border-top: 1px solid #09ad9f; text-align: center; }
.board h2 { display: inline-block; margin-bottom: 30px; padding-bottom: 12px; line-height: 1; font-size: 38px; border-bottom: 3px solid #cdcdcd; }
.board .thumb { overflow: hidden; position: relative; padding-top: 100%; width: 100%; height: 0; }
.board .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.board .context { text-align: left; }
.board .context .title { margin: 14px 0 12px; font-size: 24px; font-weight: 700; }
.board .context .pr { font-size: 18px; color: #777777; }
.board .swiper-button-prev,
.board .swiper-button-next { display: none; }
@media(max-width:1200px){
    .board h2 { font-size: 30px; }
    .board .context .title { font-size: 20px; }
    .board .context .pr { font-size: 16px; }
}
@media(max-width:768px){
    .board h2 { font-size: 20px; }
    .board { padding: 80px 0; }
    .board .context .title { font-size: 16px; }
    .board .context .pr { font-size: 14px; }
}


.section--ban { padding: 40px 0; background: #157fff; }
.ban{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
    -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.ban div{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.ban h2 { line-height: 1; font-size: 36px; color: #fff; font-weight: 400; }
.ban h2 b { font-weight: 700; }
.ban p { margin-left: 15px; font-size: 18px; color: #fff; font-weight: 300; }
.ban p span { padding-right: 10px; }
.ban a { display: block; padding-right: 30px; line-height: 1; font-size: 22px; color: #fff; font-weight: 700; background: url('/child/img/icon/arrow-right2.png') no-repeat bottom right; }
@media(max-width:1200px){
    .ban h2 { font-size: 30px; }
    .ban p { font-size: 16px; }
    .ban a { font-size: 18px; }
}
@media(max-width:768px){
    .ban{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    }
    .ban div{
        -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
    }
    .ban p { margin: 15px 0 0; font-size: 14px; }
    .ban p span { padding: 0; }
    .ban h2 { font-size: 20px; }
    .ban a { margin-top: 30px; font-size: 16px; }
}


.section--brand { padding: 100px 0; }
.brand ul{
    display: -webkit-box; display: -ms-flexbox; display: flex;
    -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.brand li { width: 20%; }
@media(max-width:1200px){

}
@media(max-width:768px){
    .section--brand { padding: 80px 0; }
    .brand li { width: 33.33333%; }
}
@media(max-width:768px){
    .brand li { width: 50%; }
}