header{
    display: block;
}



section{
    position: relative;
    width:100%;
    padding-top:10%;
    padding-bottom:10%;
}



section > div{
    width:80%;
    margin:0 auto;
}


section h1{
    font-size: 2.5rem;
    line-height: 3.5rem;
    font-weight: 800;
}


section p{
    font-size: 1.5rem;
    line-height: 2rem;
}




section h1 span{
    color:#0220D8;
}

section h2{
    font-size: 2rem;
    font-weight: 800;
    line-height: 3rem;
}




/* ---------banner----------- */




.banner_wrap{
    position: relative;
    width:100%;
    height:100vh;
}


.banner_wrap_box{
    position: absolute;
    width:80%;
    height: 80vh;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}




.banner_img_box{
    width:100%;
    height:80vh;
    background: url('../img/sub_service/banner.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left 35%;
    border-radius: 30px;
}





.banner_text_box{
    position: absolute;
    width:40%;
    height:60%;
    top:0;
    background: url('../img/sub_service/banner_text_bg.png');
    background-repeat: no-repeat;
}





.banner_text_box h1{
    font-size: 3rem;
    line-height: 4rem;
    font-weight: 800;
}


.banner_text_box p{
    font-size: 2rem;
    line-height: 2.5rem;
}






/* ---------gpt_content----------- */




.gpt_main_box h1{
    text-align: center;
}




.gpt_main_box ul{
    display: flex;
    width:100%;
    margin-top:4%;
    justify-content: space-between;
}



.gpt_main_box ul li{
    width:25%;
    margin:0.8rem;
}


.gpt_main_content_box{
    padding:2rem;
    border-radius: 30px;
    background: #f1f1f1;
}

.gpt_img img{
    display: inline-block;
    padding:1rem;
    border-radius: 20px;
    background: #030A13;
}


.gpt_text{
    padding-top:16%;
}



.gpt_text h2{
    padding-bottom:4%;
}






/* ---------stand_content----------- */





.stand_main_box h1{
    text-align: center;
}


.stand_title_btn_wrap{
    display: flex;
    width:60%;
    margin:0 auto;
    margin-top:4%;
    justify-content: space-around;
    text-align: center;
}


.stand_title_btn_box{
    width:33.33%;
    margin:2%;
    border-radius: 20px;
    color:#666;
    background: #f1f1f1;
}




.stand_title_btn_box h2{
    line-height: 5.2rem;
    cursor: pointer;
}





.stand_main_box ul{
    position: relative;
    display: flex;
    width:60%;
    height:50vh;
    margin:0 auto;
}


.stand_main_box ul li{
    position: absolute;
    width:100%;
    height:100%;
    left:50%;
    transform: translateX(-50%);
} 



.stand_main_content_box{
    display: flex;
    width:100%;
    height:100%;
    align-items: center;
}



.stand_main_content_img img{
    padding:2rem;
    border-radius: 30px;
    background: #f1f1f1;
}




.stand_main_content_text{
    width:100%;
    padding-left:10%;
}






/* ---------theme_content----------- */



.theme_wrap{
    background: #f1f1f1;
}

.theme_main_content_box{
    display: flex;
    align-items: center;
    margin-top:4%;
}


.theme_main_left_img img{
    display: block;
    filter: drop-shadow(5px 5px 12px #666);
}


.theme_main_right_slide{
    overflow: hidden;
    
}


.theme_main_right_slide ul{
    position: relative;
    display: flex;
}


.theme_main_right_slide ul li{
    margin-left:1%;
}





.theme_main_right_slide ul{
    animation: bannermove 30s linear infinite;
}
  
  @keyframes bannermove {
    0% {
        left:2%;
    }


    100%{
        left:-8200px;
    }

  }





/* ---------pos_content----------- */


.pos_main_box{
    display: flex;
    align-items: center;
}


.pos_main_title{
    width:35%;
}

.pos_main_img_wrap{
    width:65%;
}

.pos_main_img_wrap img{
    width:95%;
    margin-left:2%;
}





/* ---------contact_content----------- */




.service_contact_main_box{
    text-align: center;
}



.contact_main_img img{
    width:15%;
}



.service_contact_main_box h1{
    margin-top:2%;
}



.service_contact_main_box p{
    cursor: pointer;
    display: block;
    box-sizing: border-box;
    margin:0 auto;
    margin-top:3%;
    width:400px;
    height:100px;
    border:1px solid #030A13;
    border-radius: 100px;
    font-size: 2rem;
    line-height: 100px;
}




.service_contact_main_box p:hover {
    background: #0220D8;
    border:none;
}


.service_contact_main_box p:hover{
    color:#fff;
}


.contact_main_back_img01{
    position: absolute;
    right:20%;
    bottom:70%;
    animation: contact_main_back_img01 4s linear infinite alternate-reverse;
}



.contact_main_back_img02{
    position: absolute;
    left:20%;
    bottom:25%;
    animation: contact_main_back_img02 4s linear infinite alternate-reverse;
}



@keyframes contact_main_back_img01{
    0%{
        bottom:65%;
    }

    100%{
        bottom:70%;
    }
}






@keyframes contact_main_back_img02{
    0%{
        bottom:30%;
    }

    100%{
        bottom:25%;
    }
}










@media (max-width:600px){



    .pc{
        display: none;
    }

    .mb{
        display: block;
    }

    
    
    section{
        padding-top:8%;
        padding-bottom:8%;
    }

    section > div{
        width:90%;
        margin:0 auto;
    }


    section h1{
        font-size: 1.4rem;
        line-height: 2rem;
    }


    section h2{
        font-size: 1.2rem;
        line-height: 2rem;
    }

    

    section p{
        font-size: 1.1rem;
        line-height: 1.4rem;
    }


    


    .banner_text_box{
        width: 80%;
        height: 32%;
        background-size: contain;
    }


    
    .banner_img_box{
        background-position: center;
        background: url(../img/sub_service/mb_banner.png);
        background-size: cover;
    }




/* ---------gpt_content----------- */



    .gpt_main_box ul{
        display: grid;
        width:80%;
        margin:0 auto;
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }


    .gpt_main_box ul li{
        width:100%;
        margin:0;
        margin-top:6%;
    }


    .gpt_main_content_box{
        position: relative;
        padding:1.6rem;
    }

    .gpt_img{
        padding:0;
    }

    .gpt_img img{
        border-radius: 10px;
        background: #030A13;
        width:10%;
        padding:0.5rem;
    }


    .gpt_text{
        padding-top:8%;
    }





/* ---------stand_content----------- */



    .stand_main_box{
        text-align: center;
    }


    .stand_title_btn_wrap{
        width:100%;
    }


    .stand_title_btn_box{
        border-radius: 12px;
        margin:1%;
    }

    .stand_title_btn_box h2{
        line-height: 3rem;
    }




    .stand_main_box ul{
        display: block;
        margin-top:4%;
        width:100%;
        height:100%;
    }


    .stand_main_box ul li{
        position: static;
        left:0;
        transform: translateY(0);
    }


    .stand_main_content_box{
        display: block;
    }



    .stand_main_content_img img{
        width:85%;
        padding:0;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .stand_main_content_text{
        padding-left: 0;
    }






/* ---------theme_content----------- */



    .theme_wrap{
        overflow: hidden;
    }

    .theme_main_content_box{
        display: block;
        margin-top:8%;
    }


    .theme_main_left_img img{
        width:100%;
    }


    .theme_main_right_slide{
        overflow: auto;
        margin-top:4%;
    }

    

    .theme_main_right_slide ul{
        width:100%;
        animation: bannermove 12s linear infinite;
    }

    .theme_main_right_slide ul li{
        margin:2%;
    }


    .theme_main_right_slide li img{
        width:100%;
        padding-left:16rem;
    }



      
      @keyframes bannermove {
        0% {
            left:2%;
        }
    
    
        100%{
            left:-4600px;
        }
    
      }
    
    
/* ---------pos----------- */


    .pos_main_box{
        display: block;
        padding-top:10%;
        padding-bottom: 10%;
    }


      
    .pos_main_title{
        width:100%;
        text-align: center;
    }



    .pos_main_img_wrap{
        width:100%;
        margin-top:8%;
    }




      
/* ---------contact_content----------- */


    .service_contact_main_box p{
        font-size: 1.4rem;
        width:80%;
        height:60px;
        line-height: 60px;
    }




    .contact_main_back_img01{
        width:10%;
        animation: contact_main_back_img01 1s linear infinite alternate-reverse;
    }

    .contact_main_back_img02{
        width:10%;
        left:10%;
        animation: contact_main_back_img02 1s linear infinite alternate-reverse;
    }
    

    @keyframes contact_main_back_img02{
        0%{
            bottom:38%;
        }
    
        100%{
            bottom:33%;
        }
    }




}