.main_page{width: 100%;}
.main_section{width: 100%;}

#hd{position: fixed; width: 100%; background: #fff; z-index: 990;}
.inner{width: 1600px; max-width: 100%; margin: 0 auto;}
.p-color{color: #06165b;}
.center{text-align: center;}

h2.title{font-size: 4.86em; font-weight: 800;}
h2.title span{font-weight: 400;}
p.sub-title{font-size: 1.54em; line-height: 160%; padding: 20px 0 40px;}
p.sub-title b{font-weight: 800;}

a.link-btn{font-size: 1.31em; color: #fff; background-color: #06165b; padding: 10px 20px; display: inline-block; border-radius: 50px; border: 1px solid #06165b; box-sizing: border-box; transition: all 0.25s; font-weight: 400;}
a.link-btn:hover{background-color: #fff; color: #06165b;}

a.arrow-btn{width: 50px; height: 50px; border-radius: 50%; border: 1px solid #06165b; display: inline-block; transition: all 0.25s;  filter: grayscale(1) opacity(0.3);}
a.arrow-btn img{background-color: #fff; border-radius: 40px; margin-top: 9px; margin-left: -10px;transition: all 0.25s;}
a.arrow-btn:hover img{margin-left: 3px;}
a.arrow-btn:hover{filter: grayscale(0) opacity(1);}


/* #main01 */
#main01{position: relative;}
#main01 .slide_banner .banner.slick-slide:nth-child(1){background-image: url(../img/main/banner_img01.png);}
#main01 .slide_banner .banner.slick-slide:nth-child(2){background-image: url(../img/main/banner_img03.png);}
#main01 .slide_banner .banner.slick-slide:nth-child(3){background-image: url(../img/main/banner_img02.png);}
#main01 .slide_banner .banner.slick-slide:nth-child(4){background-image: url(../img/main/banner_img01.png);}
#main01 .slide_banner .banner.slick-slide:nth-child(5){background-image: url(../img/main/banner_img03.png);}
#main01 .slide_banner .banner.slick-slide:nth-child(6){background-image: url(../img/main/banner_img02.png);}
#main01 .slide_banner .banner{width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; color: #fff; position: relative;}
#main01 .slide_banner .banner span{padding: 0 150px; display: inline-block; position: absolute; top: 30%;}
#main01 .slide_banner .banner h1{font-size: 4.86em; font-weight: 800; line-height: 130%;}
#main01 .slide_banner .banner p{font-size: 1.44em; padding-top: 40px; line-height: 160%;}

#main01 .slick-prev,
#main01 .slick-next{position: absolute; bottom: 10%; z-index: 5; width: 15px; height: 25px; background-size: cover;  color: transparent; border: 0;}
#main01 .slick-prev{background: url(../img/main/arrow-prev.png); background-repeat: no-repeat; left: 150px;}
#main01 .slick-next{background: url(../img/main/arrow-next.png); background-repeat: no-repeat; left: 220px;}

#main01 button#toggle{position: absolute; bottom: 11%; left: 185px; z-index: 6; background: url(../img/main/pause.png); background-repeat: no-repeat; border: 0; color: transparent;}

#main01 .custom_paging{position: absolute; bottom: 10.6%; color: #fff; font-size: 18px; left: 420px;}
#main01 .custom_paging li{display: none;}
#main01 .custom_paging li.slick-active{display: block;}

#main01 .pro-bar{position: absolute; z-index: 7; bottom: 11.6%; left: 250px; width: 0px; height: 2px; background-color: #fff;}
#main01 .pro-ani{animation: proBar 6s 1 ease-in-out; width: 150px;}
@keyframes proBar {
    0%{width: 0;}
    100%{width: 150px;}
}

@media screen and (max-width :680px) {
/*#main01 .slide_banner .banner {background-position:-1150px}*/
}

/* #main02 */
#main02{padding: 120px 0; text-align: center; width: 100%; overflow: hidden;}
#main02 .move-item{margin-top: 100px; display: flex; flex-wrap: wrap; width: 4000%;}
#main02 .move-item div{margin: 0 100px; animation: move-slide 28s infinite linear;}
#main02 .move-item div img{display: inline-block; max-width: 100%; max-height: 370px;}
/* #main02 .move-item .slick-prev,
#main02 .move-item .slick-next{display: none !important;} */

@keyframes move-slide {
    0%{transform: translateX(0%);}
    99%{transform: translateX(-660%);}
    100%{transform: translateX(0%);}
}

/* #main03 */
#main03{width: 100%; padding: 100px 0; background-image: url(../img/main/main03-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center;}
#main03 .inner{position: relative;}
#main03 ul li .pd-img{float: left; width: 50%; text-align: center;}
#main03 ul li .pd-img img{max-width: 80%; max-height: 600px; margin: 0 auto;}
#main03 ul li .pd-txt{float: left; width: 50%;}
#main03 ul li .pd-txt span{font-size: 1.84em; font-weight: 800; padding-top: 50px; display: inline-block;}
#main03 ul li .pd-txt h3{font-size: 4.92em; font-weight: 800; margin-bottom: 40px; padding-bottom: 30px; position: relative;}
#main03 ul li .pd-txt h3::after{content: ""; width: 50px; height: 1px; background-color: #06165b; position: absolute; bottom: 0; left: 0;}
#main03 ul li .pd-txt p:nth-child(3){font-size: 2.40em; font-weight: 600;}
#main03 ul li .pd-txt p:nth-child(4){font-size: 1.44em; padding: 40px 0 50px; line-height: 160%;}
#main03 ul li .pd-txt a.link-btn{color: #06165b; background-color: transparent;/* margin-bottom: 100px;*/}
#main03 ul li .pd-txt a.link-btn:hover{color: #fff; background-color: #06165b;}
#main03 ul li .pd-txt a.link-btn.bg{background: #06165b; color:#fff; margin-left: 10px;}

#main03 ul li .pd-txt .more {display:flex; align-items: center;}
#main03 ul li .pd-txt .more a:nth-child(2) {padding-left:20px}


#main03 .slick-prev,
#main03 .slick-next{position: absolute; bottom: 0; z-index: 5; width: 15px; height: 25px; background-size: cover;  color: transparent; border: 0;}
#main03 .slick-prev{background: url(../img/main/c-arrow-prev.png); background-repeat: no-repeat; left: 0px;}
#main03 .slick-next{background: url(../img/main/c-arrow-next.png); background-repeat: no-repeat; left: 70px;}

#main03 button#toggle{position: absolute; bottom: 10px; left: 35px; z-index: 6; background: url(../img/main/c-pause.png); background-repeat: no-repeat; border: 0; color: transparent;}

#main03 .custom_paging{position: absolute; bottom: 5px; color: #06165b; font-size: 18px; left: 270px;}
#main03 .custom_paging li{display: none;}
#main03 .custom_paging li.slick-active{display: block;}

#main03 .pro-bar{position: absolute; z-index: 7; bottom: 14px; left: 100px; width: 0px; height: 2px; background-color: #06165b;}
#main03 .pro-ani{animation: proBar 5s 1 ease-in-out; width: 150px;}
@keyframes proBar {
    0%{width: 0;}
    100%{width: 150px;}
}


/* #main04 */
#main04{padding: 120px 0 150px;}
#main04 ul.filter{margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center;}
#main04 ul.filter li{position: relative; width: 45%;}
#main04 ul.filter li:first-child{margin-right: 40px;}
#main04 ul.filter li a{display: block; max-width: 100%;}
#main04 ul.filter li .img-wrap{margin-bottom: 20px;}
#main04 ul.filter li span{margin-left: 50px; font-size: 2.72em; line-height: 140%; color: #cdcdd2; font-weight: 700; transition: all 0.25s;}
#main04 ul.filter li:hover span{color: #353537; border-bottom: 1px solid #000; box-sizing: border-box;}
#main04 ul.filter li:hover a.arrow-btn img{margin-left: 3px;}
#main04 ul.filter li:hover a.arrow-btn{filter: grayscale(0) opacity(1);}
#main04 ul.filter li a.arrow-btn{position: absolute; bottom: 80px; left: 540px;}



/* #main05 */
#main05{padding: 0 0 120px;}
#main05 .tit-txt{display: flex; flex-wrap: wrap; align-items: flex-end;}
#main05 .tit-txt h2{padding-right: 40px;}
#main05 .tit-txt p{padding-bottom: 0;}
#main05 ul{display: flex;flex-wrap: wrap; justify-content: space-between; margin-top: 100px;}
#main05 ul li{width: 18%;}

#main05 ul li .img-box{/*width: 150px; height: 150px; border: 1px solid #06165b; box-sizing: border-box; box-sizing: border-box; border-radius: 50%; text-align: center; display: table-cell; vertical-align: middle; position: relative;*/}
#main05 ul li .img-box img {width:100%}
#main05 ul li .img-box::before,
#main05 ul li .img-box::after{content: ""; width: 0; height: 0; position: absolute; border: 3px solid transparent; box-sizing: border-box; border-radius: 50%;}

/* #main05 ul li .img-box::before{left: 0; top: 0;}
#main05 ul li .img-box::after{right: 0; bottom: 0;}

#main05 ul li:hover .img-box::before{border-top-color: #06165b; border-color: #06165b; width: 100%; height: 100%; transition: width 0.25s, height 0.25s 0.25s;}
#main05 ul li:hover .img-box::after{border-bottom-color: #06165b; border-left-color: #06165b; width: 100%; height: 100%; transition: border-color 0.25s 0.05s, width 0.25s 0.5s, height 0.25s 0.75s;} */

#main05 ul li .txt-box{position: relative; margin-top: 40px; padding-top: 20px;}
#main05 ul li .txt-box::before{content: ""; width: 80px; height: 1px; background-color: #06165b; position: absolute; top: 0; left: 0;}

#main05 ul li .txt-box h3{font-size: 2.72em; font-weight: 700;}
#main05 ul li .txt-box h3 span{font-size: 14px;}
#main05 ul li .txt-box p{font-size: 16px; font-weight: 400; padding-top: 40px; word-break: keep-all; line-height: 160%;}
#main05 ul li .txt-box p b{font-weight: 700;}
#main05 ul li .txt-box a.arrow-btn{position: absolute; right: 10px; top: 0;}
#main05 ul li:hover  .txt-box a.arrow-btn img{margin-left: 3px;}
#main05 ul li:hover  .txt-box a.arrow-btn{filter: grayscale(0) opacity(1);}


/* #main06 */
#main06{width: 100%; display: flex; flex-wrap: wrap;}
#main06 .contact-img{width: 50%; background-image: url(../img/main/main06-bg.png); background-repeat: no-repeat; background-position: center;}
#main06 .contact-txt{width: 50%; padding: 100px;}
#main06 .contact-txt ul{margin-bottom: 40px;}
#main06 .contact-txt ul li{font-size: 1.85em; font-weight: 800; border-bottom: 1px solid #cdcdd2; box-sizing: border-box; padding: 15px 0;}
#main06 .contact-txt ul li:last-child{border-bottom: 0;}
#main06 .contact-txt ul li img{margin-right: 40px;}


/* #main07 */
#main07{padding: 120px 0; text-align: center;}
#main07 .client-logo{background-color: #f5f5f5; width: 100%; height: 250px; overflow: hidden; margin-bottom: 50px; transition: all 0.25s; text-align: center;}
#main07 .client-logo img{animation: client-move 60s infinite linear; width: 100%; filter: grayscale(100%);}
#main07 .client-logo img.animate{animation: none; }
#main07 .client-logo.view{height: auto;}

#main07 .client-logo .logo-img {display:none}
#main07 .client-logo.view .logo-img {display:block}
#main07 .client-logo.view .default_client_logo {display:none}

@keyframes client-move {
    0%{transform: translateY(-50px);}
    100%{transform: translateY(-4200px);}
    /* 100%{transform: translateY(0);} */
}


@media screen and (max-width : 1600px) {
    .inner{padding: 0 20px;}

    #main01 .slick-prev{left: 80px;}
    #main01 .slick-next{left: 150px;}
    #main01 button#toggle{left: 115px;}
    #main01 .custom_paging{left: 350px;}
    #main01 .pro-bar{left: 180px;}

    #main01 .slide_banner .banner span{padding: 0 80px;}

    #main03 button#toggle{left: 55px;}
    #main03 .pro-bar{left: 120px;}

    #main06 .contact-txt{padding: 100px 80px;}

    /* #main07 .client-logo img.animate{margin-top: -70px;} */
    /* #main07 .client-logo.view{height: 600px;} */

    @keyframes client-move {
        0%{transform: translateY(-50px);}
        100%{transform: translateY(-3300px);}
    }
}
@media screen and (max-width : 1420px) {
    #main04 ul.filter li .img-wrap{width: 100%;}
    #main04 ul.filter li .img-wrap img{width: 100%;}
    #main04 ul.filter li a.arrow-btn{ bottom: -60px; left: 60px;}

    #main05 ul{justify-content: flex-start;}
    #main05 ul li{width: 30%; margin-right: 5%;}
    #main05 ul li:nth-child(3){margin-right: 0;}
    #main05 ul li:nth-child(5){margin-right: 0;}
    #main05 ul li:nth-child(1n+4){margin-top: 50px;}

    /* #main07 .client-logo img.animate{margin-top: -90px;} */
    /* #main07 .client-logo.view{height: 500px;} */
    #main07 .client-logo img{animation: client-move 60s infinite linear;}

    @keyframes client-move {
        0%{transform: translateY(-50px);}
        100%{transform: translateY(-2800px);}
    }
}

@media screen and (max-width : 1200px) {
    #main03{padding: 40px 0;}
    #main03 ul li .pd-img{float: none; width: 100%; margin: 20px 0 80px;}
    #main03 ul li .pd-img img{width: 50%;}
    #main03 ul li .pd-txt{float: none; width: 100%;}
    #main03 ul li .pd-txt span{padding-top: 0;}
    #main03 ul li .pd-txt h3{margin-bottom: 20px; padding-bottom: 20px;}
    #main03 ul li .pd-txt a.link-btn{margin-bottom: 20px;}
    #main03 ul li .pd-txt p:nth-child(4){padding: 20px 0;}
    #main03 ul li .pd-txt p:nth-child(4) br.none{display: none; word-break: keep-all;}


    #main04 ul.filter li{width: 100%; text-align: center;}
    #main04 ul.filter li span{margin-left: 0;}
    #main04 ul.filter li:first-child{margin-right: 0px; margin-bottom: 40px;}
    #main04 ul.filter li .img-wrap img{width: auto;}
    #main04 ul.filter li a.arrow-btn{text-align: start; left: 50%; transform: translateX(-50%);}

    #main06 .contact-img{width: 100%; height: 500px; background-size: cover;} 
    #main06 .contact-txt{width: 100%; padding: 50px 80px;}

    /* #main07 .client-logo img.animate{margin-top: -90px;} */
    /* #main07 .client-logo.view{height: 420px;} */

    @keyframes client-move {
        0%{transform: translateY(-50px);}
        100%{transform: translateY(-2300px);}
    }
}
@media screen and (max-width : 1020px){
    #main07 .client-logo img{animation: client-move 60s infinite linear;}
    @keyframes client-move {
        0%{transform: translateY(-50px);}
        100%{transform: translateY(-180px);}
    }
}

@media screen and (max-width : 900px) {
    #main03 ul li .pd-img img{width: 60%;}

    #main05 ul li{width: 42%; margin-right: 10%;}
    #main05 ul li:nth-child(2){margin-right: 0;}
    #main05 ul li:nth-child(3){margin-right: 10%;}
    #main05 ul li:nth-child(4){margin-right: 0;}
    #main05 ul li:nth-child(1n+3){margin-top: 50px;}

    @keyframes client-move {
        0%{transform: translateY(0px);}
        100%{transform: translateY(-1800px);}
    }
}
@media screen and (max-width : 768px) {
    #main01 .slide_banner .banner span{padding: 0 20px;}

    #main01 .slick-prev{left: 20px;}
    #main01 .slick-next{left: 90px;}
    #main01 button#toggle{left: 55px;}
    #main01 .custom_paging{left: 290px;}
    #main01 .pro-bar{left: 120px;}

    #main03 ul li .pd-img img{width: 80%;}

    #main06 .contact-img{height: 400px;}
    #main06 .contact-txt{padding: 50px 20px;}

    #main07 .client-logo{height: auto;}
    #main07 .client-logo img{animation: none;}
    #main07 a.link-btn{display: none;}

}
@media screen and (max-width : 650px) {
    #main04 ul.filter li .img-wrap img{width: 100%;}
}
@media screen and (max-width : 600px) {
    #main05 ul li{width: 100%; margin-right: 0%;}
    #main05 ul li:nth-child(2){margin-right: 0;}
    #main05 ul li:nth-child(3){margin-right: 0%;}
    #main05 ul li:nth-child(4){margin-right: 0;}
    #main05 ul li:nth-child(1n+2){margin-top: 50px;}
}
@media screen and (max-width : 450px) {
    
}


@media screen and (max-width : 600px) {
#main01 .slide_banner .banner h1{font-size: 3.2em; font-weight: 800; line-height: 130%;}
#main01 .slide_banner .banner p{font-size: 1.2em; padding-top: 40px; line-height: 160%;}
#main04 ul.filter li span {font-size: 1.72em;}
}