@charset "UTF-8";

/*page1*/
.page1 {
    position: relative;
    display: flex;
}
.swiper {
    width: 100%;
    height: 100%;
}
.swiper-wrapper {
    transition: 0.8s !important;
}
.article {height: 100%;}
.page1-box1 {    
    display: block;
    height: 100%;
    background-image: url('../img/main_bg1.jpg');
    background-size: cover;
    background-position: top center;
    color: #fff;
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}
.page1-box2 {
    display: block;
    height: 100%;
    background-image: url('../img/main_bg2.jpg');
    background-size: cover;
    background-position: center right;
    color: #fff;
    transform: translateZ(0);
    image-rendering: -webkit-optimize-contrast;
}
.text-hd, .text-btm, .page-innertxt h1 { text-shadow: 1px 1px rgba(0, 0, 0, 0.5);}
.page-inner {margin-top: 3vh;}
.main-down {
    border-radius: 10px;
    background: linear-gradient(145deg, #fff, #f3f3f3);
    box-shadow:  3px 3px 9px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.8);
    font-size: 0.95em;
    text-align: center;
}

/*page2*/

.page2-square {
    background-color: #234BF9; 
    width: 60%;
    margin: auto;
    border-radius: 30px; 
}
.page2-left {width: 100%; position: relative;}
.page2-s-inner {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 60%;
    margin-left: 5%;
    color: #fff;
    background: rgba( 70, 163, 255, 0.7 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 4px );
    -webkit-backdrop-filter: blur( 4px );
    border-radius: 30px;
    border: 1px solid rgba( 255, 255, 255, 0.5 );
    text-align: center;
}

.page2-s-tit {font-weight: 600;}
.page2-s-txt {font-weight: 700;}
.w-line {
    border-bottom: 1px solid rgba( 255, 255, 255, 0.5 );
}
/*page3*/


.page3-wrap h2 {text-align: center; font-size: 1.2em;}
.page3-top-txt {text-align: center;}
.page3-middle {line-height: 2;}
/*page4*/

/*page5*/

/*footer*/
#footer {background-color: #f5f5f5; color: #707070;}
.footer-wrap {padding: 30px;}
.sns {padding: 20px 0;}
.sns a {font-size: 1.1em; color: #707070;padding: 0 10px;}
.ft-info {font-size: 0.8em; padding: 10px 0 ;}
.ft-info dt {float: left;}
.ft-txt {font-size: 0.8em;}

/*custom*/
.fp-watermark a { font-size: 0.8em !important; background: #f5f5f5 !important; border: 0; color: #707070 !important;}
.shadow #fp-nav ul li a.active span, .shadow #fp-nav ul li:hover a.active span, .shadow .fp-slidesNav ul li a.active span, .shadow .fp-slidesNav ul li:hover a.active span {background: #fff; color: #fff;}
.shadow #fp-nav ul li .fp-tooltip {color: #fff;}
.fp-sr-only {display: none !important;}
#fp-nav ul li .fp-tooltip {color: #aaa;}
#fp-nav ul li:last-child {display: none;}
.swiper-button-next {right: 80px; color: #fff;}
.swiper-button-prev {left: 80px; color: #fff;}
.swiper-pagination {}
.swiper-pagination-bullet {width: 14px; height: 14px;}
.swiper-prev{
    position: absolute; 
    top: 45%; 
    left: 30px; 
    display: block; 
    width: 30px; 
    height: 30px; 
    transform: rotate(45deg); 
    border: 5px solid #234BF9; 
    border-right: 0;
    border-top: 0;
    z-index: 10;
    background-color: transparent;
}
.swiper-next{
    position: absolute; 
    top: 45%; 
    right: 30px; 
    display: block; 
    width: 30px; 
    height: 30px; 
    transform: rotate(45deg); 
    border: 5px solid #234BF9; 
    border-left: 0;
    border-bottom: 0;
    z-index: 10;
    background-color: transparent;
}

@media screen and (max-width: 330px) {
    .page-inner img {height: 40% !important;}
    .logo img {width: 30% !important;}
    .page5-txt {font-size: 0.75em  !important;}
    .page5-light-b h3 {font-size: 0.95em  !important;}
}
@media screen and (max-width: 1099px) {
    .logo img {width: 30%;}
    .page1 {flex-direction: column; height: 100% !important; overflow: hidden;justify-content: space-evenly;}
    .page1-box1 {text-align: center; }
    .page1-box2 {
        text-align: center;
        background-image: url('../img/main_bg2_m.jpg');
        background-size: cover;
        background-position: center;

    }
    .page-inner img {width: 50%; padding-top: 10%;}
    .page-innertxt {margin-bottom: 30px; padding: 5% 30px;}
    .text-hd {display: none; font-size: 0.8em; padding: 5px 0;}
    .text-btm {display: none; font-size: 0.8em;padding: 5px 0;}
    .page-innertxt h1 {font-size: 1.1em;}
    .main-app-down {height: 30%; padding-top: 4%;}
    .main-down {
        margin: 10% 20px;
        padding: 10px 0;
    }
    .swiper-pagination {top: 3%;}
    
    /*page2*/
    .page2 {position: relative; padding: 50px 30px 0; overflow: hidden; height: 100% !important;}
    .page2-box {height: 100%;}
    .page2-right h2 {font-size: 1.3em; padding-bottom: 20px;}
    .page2-txt {padding-bottom: 20px; font-size: 0.9em;}
    .page2-left {margin-top: 30px; margin-bottom: 30px; }
    .page2-square {height: 33vh;}
    .page2-s-inner {height: 33vh; top: 20px;right: 10%;}
    .in-box {height: 45%;}
    .page2-s-tit {padding-top: 8%; font-weight: 600;}
    .page2-s-txt {padding-top: 5%; font-weight: 700; font-size: 1.3em;}
    .page2-s-tit2 {font-weight: 600;}
    .page2-s-txt2 {font-weight: 700; font-size: 1.3em;}
    /*page3*/
    .page3 {padding: 0 30px; overflow: hidden; height: 100% !important;}
    .page3-wrap {}
    .page3-img-pc {display: none;}
    .page3-wrap h2 {font-size: 1.2em; padding: 60px 0 30px;}
    .page3-top-txt {font-size: 0.8em;}
    .page3-middle { display: block;}
    .page3-middle h4 {font-size: 1em;}
    .page3-mbox-txt {font-size: 0.8em;}
    .page3-middle img {width: 40%; height: 40%; padding-top: 10px;}
    .page3-mbox1 {display: flex; padding: 20px 0;}
    .page3-mbox2 {display: flex; flex-direction: row-reverse; padding: 20px 0;}
    /*page4*/
    .page4 {overflow: hidden; height: 100% !important;}
    .page4-wrap {width: 100%; margin-top: 0 !important;}
    .page4-left-box {padding: 5% 0;}
    .page4-left {padding: 40px;}
    .page4-inner {padding-top: 20%;}
    .page4-left img{padding: 0 10px; height: auto; width: 100%;justify-content: center;}
    .page4-right h1 {text-align: center; padding: 20px 0; font-size: 1em;}
    .page4-txt {text-align: center; padding-bottom: 30px; font-size: 0.85em;}
    .page4-grid {display: none;}
    /* .page4-grid {height: 30vh; display: grid; grid-template-columns: 1fr 1fr; padding: 0 30px;} */
    .page4-grid img {width:38px; height: 38px; }
    .page4-list h4 {font-size: 0.9em;}
    .page4-list {display: flex; padding: 10px 0 10px;}
    .page4-list-txt {font-size: 0.8em;}
    .page4-box {padding-left: 10px;}
    .swiper-prev{
        width: 15px; 
        height: 15px;
        left: 20px;
    }
    .swiper-next{
        width: 15px; 
        height: 15px; 
        right: 20px;
    }
    #footer { height: 380px;}
    .page5 .fp-scrollable .fp-section{height: 100vh !important;}
    .page5-wrap {padding: 30px;}
    .page5-left {width: 100%; position: relative; z-index: 10;}
    .page5-square {
        background-color:  rgba( 70, 163, 255, 1 );
        width: 80%;
        margin: auto;
        border-radius: 30px; 
        height: 50vh;
    }
    .page5-light-b {
        position: absolute;
        width: 80%;
        margin-left: 5%;
        color: #fff;
        background: rgba(0, 42, 212, 0.7);
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
        border-radius: 30px;
        border: 1px solid rgba( 255, 255, 255, 0.5 );
        height: 50vh;top: 20px;right: 5%;
        padding: 10%;
    } 
    .page5-light-b h3 {font-size: 1.1em; padding-bottom: 10%;}
    .page5-light-b a {font-size: 1em; color: #fff;}
    .contact {margin: 10% 1%; float: right; padding-left: 10px;}
    .contact::after {
        content: '';
        display: block;
        width: 110%;
        border-bottom: 1px solid #fff;
    }
    .page5-txt {font-size: 0.85em;}
    .page5-right {margin-top: 80px;}
    .page5-right img {width: 100%;}
    .freepik {font-size: 0.5em;}
    .footer-wrap img {width: 40%;}
    #fp-nav {display: none;}
    .swiper-button-next {display: none;}
    .swiper-button-prev {display: none;}
    .fp-auto-height {display: none;}
}
@media screen and (min-width: 780px) and (max-width: 1099px) {
        /*page4*/
        .page4-left-box {position: relative; overflow: hidden;}
        .page4-left {display: flex; justify-content: center; align-items: center;}
        .page4-left img{width: 50%; height: auto; padding: 50px;}
        .page4-grid {display: flex; justify-content: space-evenly; padding: 20px; align-items: center; margin-top: 20px;}
        .page4-list {display: flex;justify-content: space-evenly; }
        .page4-list img {width: 20%; height: 20%;}
        .page4-right {width: 45%; padding: 90px 50px; }
        .page4-right h1 {font-size: 1.5em;}
        .page4-txt {font-size: 1em; padding: 50px 0;}
}
@media screen and (min-width: 1100px) {
    .page1, .page2, .page3, .page4, .page5 {height: 100vh !important;}
    .page-inner {display: flex; flex-direction: row;justify-content: center; height: 90%; }
    .page-inner img {height: 100%; padding-right: 100px;}
    .text-hd {font-size: 1.75em; padding-top: 140px;}
    .text-btm {font-size: 1.5em; padding: 50px 0;}
    .page-innertxt h1 {font-size: 3em; padding-top: 50px;}
    .main-app-down-inner {display: flex; flex-direction: row;}
    .main-down {
        margin: 0 30px 0 0;
        padding: 15px 50px;
    }
    /*page2*/

    .page2 {padding: 50px 50px;}
    .page2-box {height: 100vh; padding: 5% 0; display: flex; flex-direction: row-reverse;}
    .page2-right {padding-top: 150px;}
    .page2-square {height: 60vh;}
    .page2-s-inner {height: 60vh;}
    .page2-left {padding-top: 50px;}
    .page2-s-inner {top: 18%;right: 12%;}
    .page2-s-tit {padding-top: 50px; font-size: 2em;}
    .page2-s-txt {padding-top: 20px; font-size: 3em;}
    .page2-right h2 {font-size: 2.3em; padding-bottom: 20px;}
    .page2-txt {padding-bottom: 20px; font-size: 1em;}
    .page2-padding {padding-top: 80px;}
    /*page3*/
    .page3-wrap {
    }
    .page3-img-m {display: none !important;}
    .page3-middle {display: flex; justify-content: center;}
    .page3 {padding: 100px 0 0;}
    .page3-wrap h2 {font-size: 2.3em; padding-bottom: 20px; padding-top: 30px;}
    .page3-top-txt {font-size: 1em;}
    .in-box {height: 50%;}
    .page3-middle {height: 50vh; margin-top: 80px; text-align: center;}
    .page3-middle img {display: flex; height: 50%; margin: auto; justify-content: center;}
    .page3-mbox1{padding: 0 50px;}
    .page3-mbox2{padding: 0 50px;}
    .page3-middle h4 {font-size: 1.7em; padding: 30px 0;}
    /*page4*/
    .page4-wrap {height: 95vh;}
    .page4-left-box {position: relative; overflow: hidden;height: 75vh !important;}
    .page4-left {display: flex; justify-content: center; align-items: center; }
    .page4-left img{height: 100%; padding: 50px;}
    .page4-grid {display: flex; justify-content: space-evenly; padding: 30px; align-items: center; margin-top: 20px;}
    .page4-list {display: flex;justify-content: space-evenly; }
    .page4-list img {width: 20%; height: 20%;}
    .page4-right {width: 45%; padding: 90px 50px; }
    .page4-right h1 {font-size: 2em;}
    .page4-txt {font-size: 1.1em; padding: 50px 0;}
    /*page5*/
    .page5-wrap {height: 90vh; padding: 120px 20px 20px; display: flex;}
    .page5-left {width: 100%; position: relative; z-index: 10;}
    .page5-square {
        background-color:  rgba( 70, 163, 255, 1 );
        width: 80%;
        margin: auto;
        border-radius: 30px; 
        height: 50vh;
    }
    .page5-light-b {
        position: absolute;
        width: 80%;
        margin-left: 5%;
        color: #fff;
        background: rgba(0, 42, 212, 0.7);
        box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
        backdrop-filter: blur( 4px );
        -webkit-backdrop-filter: blur( 4px );
        border-radius: 30px;
        border: 1px solid rgba( 255, 255, 255, 0.5 );
        height: 50vh;top: 50px;right: 4%;
        padding: 8%;
    } 
    .page5-light-b h3 {font-size: 1.8em; padding-bottom: 10%;}
    .page5-light-b a {font-size: 1.1em; color: #fff;}
    .contact {margin: 10% 1%; float: right; padding-left: 10px;}
    .contact::after {
        content: '';
        display: block;
        width: 110%;
        border-bottom: 1px solid #fff;
    }
    #footer { height: 220px;}
    .page5-txt {font-size: 1em;}
    .page5-right {display: flex; flex-direction: column-reverse; margin-left: -5%;}
    .page5-right img {width: 100%;}
    .freepik {font-size: 0.8em; text-align: right; padding-bottom: 30px;}
    .footer-wrap img {width: 10%;}
    .sns {float: right;}
    .footer-box {width: 100%; display: flex;justify-content: space-between;}
    .ft-info {width: 300px;}
    .ft-txt {text-align: right;}
}