#banner{width:100%; background-repeat:no-repeat; background-position:center; position:relative; overflow:hidden;}
#banner>video{position:absolute; left:0; top:0; z-index:-1; min-width:100%; min-height:100%; width:auto; height:auto; filter:grayscale(40%)}

ul.banner{position:relative;}
ul.banner>li{display:none; position:absolute; top:0;}
ul.banner>li:first-child{display:block;}
ul.banner, ul.banner>li{width:100%; background-repeat:no-repeat; background-size:cover; background-position:center;}
ul.banner>li>h2, ul.banner>li>h3{color:#FFF; text-align:center; font-weight:bold;}
ul.banner>li div.qr{margin-left:auto; margin-right:auto;}
ul.banner>li div.qr>img{max-width:100%;}

ul.banner>li ul.style-ul-info{margin-left:auto; margin-right:auto;}
ul.banner>li ul.style-ul-info>li{width:33.33%; text-align:center; font-size:16px; color:#FFF;}
ul.banner>li ul.style-ul-info>li>span{margin-right:5px;}

ul.banner>li ul.style-tab{width:280px; margin-left:auto; margin-right:auto;}
ul.banner>li ul.style-tab>li{width:50%; text-align:center; font-size:16px; background-color:#FFF; color:#252c41; line-height:40px; -webkit-transition:0.5s; transition:0.5s;}
ul.banner>li ul.style-tab>li.on{background-color:#f1404b; color:#FFF;}
ul.banner>li ul.style-tab>li:hover{box-shadow:0 0 5px #888;}

/* PC */
@media screen and ( min-width:1000px ) {
    #banner, ul.banner, ul.banner>li{height:800px;}
    ul.banner>li{padding-top:100px;}
    ul.banner>li>h2{font-size:40px;}
    ul.banner>li>h3{font-size:30px; margin-top:30px;}
    ul.banner>li div.qr{width:200px; margin-top:100px;}
    ul.banner>li ul.style-ul-info{width:600px;}
    ul.banner>li ul.style-tab{margin-top:50px;}
}

/* PAD & PHONE */
@media screen and ( max-width:1000px ) {
    #banner, ul.banner, ul.banner>li{height:500px;}
    #banner>video{display:none;}
    #banner{background:url("/ui/default/img/banner-1.jpg") no-repeat center; background-size:cover;}
    ul.banner>li{padding-top:60px;}
    ul.banner>li>h2{font-size:26px;}
    ul.banner>li>h3{font-size:16px; margin-top:20px;}
    ul.banner>li div.qr{width:45%; margin-top:40px;}
    ul.banner>li ul.style-ul-info{width:86%;}
    ul.banner>li ul.style-ul-info>li{font-size:12px;}
    ul.banner>li ul.style-tab{margin-top:30px;}
}

ul.index-service{}
ul.index-service>li{padding:30px 0; border-radius:6px;}
ul.index-service>li>ul{width:86%; margin:20px auto;}
ul.index-service>li>ul>li{text-align:center; background-color:#F9F9F9; border-radius:6px; margin-bottom:10px; padding:10px 0;}
ul.index-service>li>ul>li>p{text-align:center; font-size:12px;}
ul.index-service>li img{min-width:60px; max-width:80px; width:45%; vertical-align:middle;}
ul.index-service>li:hover ul>li{box-shadow:0 0 5px #ccc;}

ul.index-programme{}
ul.index-programme>li{border-radius:6px; text-align:center;}
ul.index-programme>li>img{max-width:100px; min-width:50px; width:45%;}
ul.index-programme>li>p{text-align:center;}

ul.index-flow{box-sizing:border-box;}
ul.index-flow>li{padding:5px 0; text-align:center; min-height:90px;}
ul.index-flow>li:nth-child(2n+1){width:12%; border-radius:10px; -webkit-transition:0.5s; transition:0.5s;}
ul.index-flow>li:nth-child(2n+1):hover{box-shadow:0 0 5px #888;}
ul.index-flow>li:nth-child(2n){width:10%; background-image:url("../img/arrow.png"); background-size:40%; background-repeat:no-repeat; background-position:center;}
ul.index-flow>li p{text-align:center; font-size:16px; line-height:20px; padding:10px 0; font-weight:lighter;}

ul.index-guarantee{}
ul.index-guarantee>li{padding:40px 0; border-radius:6px;}
ul.index-guarantee>li p{text-align:center; margin-top:20px;}

ul.index-news>li{border-radius:6px;}
ul.index-news>li ul.news-list>li a{display:block;}


/* PC */
@media screen and ( min-width:1000px ) {
    ul.index-programme>li{padding:30px 0; margin-bottom:30px;}

    ul.index-flow>li img{width:90px; height:90px;}

    ul.index-news>li{padding:40px 0;}
    ul.index-news>li ul.news-list{width:220px; margin:24px auto 0 auto; min-height:170px;}
    ul.index-news>li ul.news-list>li a{line-height:34px; font-size:14px;}
}

/* PAD & PHONE */
@media screen and ( max-width:1000px ) {
    ul.index-service>li{}

    ul.index-programme{width:90%; margin:30px auto 0 auto;}
    ul.index-programme>li{padding:15px 0; margin-bottom:20px;}
    ul.index-programme>li>p{font-size:13px;}

    ul.index-flow{padding:20px 4%;}
    ul.index-flow>li p{font-size:12px;}
    ul.index-flow>li img{width:100%;}

    ul.index-news>li{padding:20px 0;}
    ul.index-news>li ul.news-list{width:90%; margin:20px auto 0 auto;}
    ul.index-news>li ul.news-list>li a{line-height:24px; font-size:12px;}
}