@media screen and (max-width: 1430px){
    .kvline{
        right: 220px;
    }
    .kvtitle{
        right: 80px;
        left: unset;
    }
}
@media screen and (max-width: 1200px){

    nav ul li {
        margin-left: 30px;
    }
    .work_slide .slide2 ul li:first-child p,
    .work_slide .slide3 ul li:first-child p{
        width: 400px;
        right: -430px;
    }
    .work_slide ul li p {
        right: -390px;
        width: 360px;
        font-size: 18px;
    }
    .slide2 .goddess{
        display: none;
    }
}

@media screen and (max-width: 1024px){
    nav{
        padding: 20px 25px;
    }
    .menu{
        width: 30px;
        position: relative;
        cursor: pointer;
        z-index: 30;
    }
    .menu_bar{
        position: absolute;
        width: 30px;
        height: 3px;
        background-color: #0062c6;
        transition: .3s;
    }
    .menu_bar:first-child{
        top: -7px
    }
    .menu_bar:last-child{
        bottom: -10px
    }
    .menu.active .menu_bar:nth-child(2){
        opacity: 0;
    }
    .menu.active .menu_bar:first-child{
        top: -3px;
        transform: rotate(45deg)
    }
    .menu.active .menu_bar:last-child{
        bottom: -0px;
        transform: rotate(-45deg)
    }
    nav ul{
        display: block;
        width: 285px;
        height: 100vh;
        position: fixed;
        right: -285px;
        background-color: #fff;
        top: 0;
        box-sizing: border-box;
        padding-left: 30px;
        padding-top: 50px;
        z-index: 20;
        transition: .3s;
        margin-top: 0;
    }
    nav ul.active{
        right: 0;
    }
    nav ul li{
        font-size: 18px;
        margin: 30px auto;
        width: unset;
        text-align: left;
    }    
    nav ul li:nth-child(5),
    nav ul li:nth-child(6),
    nav ul li:nth-child(7),
    nav ul li:nth-child(8){
        margin-bottom: unset;
        padding-top: 0px;
        border-top: none;
    }
    nav ul li a.active::before{
        display: none;
    }
    .blackBG.active{
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 11;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,.6);
    }
    .menu_dots_area{
        display: none;
    }
    h1{
        font-size: 40px;
    }
    #section3-1 h1{
        padding-top: 50px;
    }
    h2{
        font-size: 28px;
        max-width: 90%;
        margin: auto;
        margin-bottom: 15px;
        padding-top: 100px;
    }
    h3{
        font-size: 18px;
        max-width: 90%;
        margin: auto;
    }
    h3 span{
        line-height: 1.35;
        display: block;
    }
    #section4 h3 span, #section5 h3 span, #section6 h3 span, #section7 h3 span{
        font-size: 15px;
    }
    .what_img{
        display: none;
    }
    .what_text{
        width: 600px;
        max-width: 90%;
        margin: auto;
    }
    .yr{
        margin-top: 15px;
    }
    .diff{
        margin-top: 150px;
    }
    .diff h3{
        max-width: 90%;
        border-bottom: solid 1px #000;
        padding-bottom: 7px;
        text-align: center;
        font-size: 20px;
    }
    .diff h3 span{
        border: none;
        margin-top: 10px;
        font-size: 18px;
    }
    .diff h3::before{
        height: 65px;
        width: 65px;
        line-height: 65px;
        font-size: 45px;
        margin: auto;
        right: 10px;
        left: 0;
        top: -75px;
    }
    .diff h3::after{
        height: 65px;
        width: 65px;
        line-height: 65px;
        font-size: 45px;
        margin: auto;
        right: 0;
        left: 0;
        top: -80px;
    }
    .diff h3 span::before{
        bottom: -27px;
    }
    .diff h3 span::after{
        bottom: -25px;
    }
    .vs{
        display: block;
    }
    .vs_item{
        margin: 35px auto 50px;
        height: 240px;
    }
    .vs_item img{
        width: 150px;
        float: right;
        z-index: 2;
    }
    #section2 {
        padding-bottom: 50px;
    }
    #section3 h2 img{
        top: -10px;
    }
    .work_slide_img{
        display: none;
    }
    .work_slide_text{
        width: 90%;
    }
    .work_slide ul{
        left: 0;
        right: unset;
    }
    .work_slide ul li p{
        right: unset;
        left: 120px;
        font-size: 18px;
    }
    .work_slide .slide2 ul li:first-child p,
    .work_slide .slide3 ul li:first-child p {
        left: 105px;
    }
    .slide4 .work_slide_text{
        padding-top: 40px;
        padding-bottom: 120px;
    }
    .slide4title{
        font-size: 24px;
    }
    .slide4 p{
        font-size: 15px;
    }
    /* .hammer{
        bottom: 15px;
    } */
    #section4 h2 img{
        display: none;
    }
    #section4 h3{
        margin-bottom: 30px;
    }
    .who_slide .slide_container{
        height: unset;
    }
    .who_slide .slide{
        height: auto !important;
    }
    .who_slide_title{
        font-size: 18px;
    }
    .who_slide_title span{
        font-size: 60px;
    }
    .who_slide .slide{
        padding: 20px;
    }
    .who_3item{
        display: block;
        /* padding-left: 100px; */
        width: 250px;
        margin: auto;
        padding-bottom: 50px;
    }
    .item3{
        width: auto !important;
        border-right: none !important;
        padding: 0 ;
        padding-left: 0 !important;
        font-size: 15px;
        margin-bottom: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ffe282;
    }
    .item3:last-child{
        border: none;
    }
    .item3:first-child::before, .item3:nth-child(2)::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-top: solid 7px #ffe282;
        border-left: solid 9px transparent;
        border-right: solid 9px transparent;
        border-bottom: solid 7px transparent;
        position: absolute;
        left: 40px;
        bottom: -14px;
        top: unset;
    }
    .item3:first-child::after, .item3:nth-child(2)::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-top: solid 5px #0948a6;
        border-left: solid 7px transparent;
        border-right: solid 7px transparent;
        border-bottom: solid 5px transparent;
        position: absolute;
        left: 42px;
        bottom: -10px;
        top: unset;
    }
    .item3 .yellow{
        font-size: 20px;
    }
    .three{
        width: 80px;
        top: -20px;
        left: 23px;
    }
    .who_slide .slide2{        
        padding-bottom: 50px;
    }
    .who_6item_area{
        height: auto;
        display: block;
        width: unset;
    }
    .item6{
        width: 210px;
        height: 120px;
        margin: 20px auto;
        position: relative;
        padding: 12px 0px 12px 35px ;
        box-sizing: border-box;
    }
    .item6 .icon{
        position: absolute;
        left: -25px;
        top: calc( 50% - 25px);
        width: 50px;
        height: 50px;
    }
    .item6 .text{
        margin-top: 5px;
        line-height: 19px;
        font-size: 16px;
    }
    .six{
        width: 75px;
        top: -30px;
        left: 30px;
    }
    .who_slide .slide_btn_area{
        margin: unset;
        left: unset;
        right: 50px;
    }
    .who_slide .slide2{        
        border-right: solid 10px #fafafa;
    }
    .who_slide .slide2 .slide_btn_area{
        left: unset;
        right: 50px;
    }
    .section5_img1, .section5_img2{
        display: none;
    }
    .section5_wrapper{
        width: 500px;
        margin: auto;
    }
    .map_area{
        margin: 50px 0;
    }
    .map_head{
        margin: 60px auto;
        width: 75px;
        height: 75px;
    }
    .map_head_img{
        width: 75px;
        height: 75px;
        bottom: 5px;
    }
    .map_item{
        font-size: 15px;
        width: 80px;
        padding: 5px;
        margin: 30px auto;
    }
    .map_head:first-child::after{
        height: 850px;
    }
    .map_item:nth-child(odd) .map_detail{
        left: 120px;
        text-align: left;
        font-size: 15px;
    }
    .map_item:nth-child(even) .map_detail {
        left: 120px;
        font-size: 15px;
    }    
    .triangle {
        border-top: solid 80px #fafafa;
        border-left: solid 50vw transparent;
        border-right: solid 50vw transparent;
        border-bottom: solid 80px transparent;
        top: 160px;
    }
    #section6{
        background-image: url(img/4job_m.jpg);
        background-position: top 50px;
        background-size: 100%;
    }
    #section6 h3{
        margin-bottom: 180px;
    }
    .how_title{
        font-size: 18px;
    }
    .how_title .sub{
        font-size: 15px;
    }
    .write{
        display: none;
    }
    .block1{
        height: auto;
        padding: 55px 40px 55px 80px;
    }
    .block1 .youcanhelp{
        top: -237px;
        right: 0px;
        width: 200px;
    }
    .block{
        width: 90%;
    }
    .block2{
        height: auto;
        padding: 45px 60px 45px 30px;
    }
    .how_title::after {
        content: '？';
        width: 50px;
        height: 50px;
        top: 0;
        left: -60px;
        font-size: 32px;
        line-height: 50px;
    }
    .how_title::before {
        content: '';
        width: 50px;
        height: 50px;
        top: 5px;
        left: -65px;
    }
    .block4{
        height: auto;
        padding: 30px 15px;
        top: -30px;
    }
    .block4 .how_title{
        width: 384px;
        line-height: 1.3;
    }
    .block4 .ex{
        font-size: 15px;
    }
    .jugdement{
        display: block;
    }
    .jugdement .dashed{
        margin: auto;
        max-width: 95%;
    }
    .jugdement .item{
        width: 120px;
        height: 80px;
    }
    .jugdement .item p{
        font-size: 15px;
    }
    .jugdement .item .vote{
        width: 45px;
        height: 45px;
        line-height: 45px;
        border: dashed 1px #ffbe23
    }
    .jug2{
        max-width: 95%;
        margin: auto;
    }
    .jug1{
        margin-left: unset;
    }
    .jug1 .item{
        margin: auto;
    }
    .block4 .star{
        margin-top: 30px;
    }
    #section7{
        padding-bottom: 100px;
    }
    #section7 .container{
        width: 90%;
        margin: auto;
    }
    #section7 h3{
        line-height: 30px;
        margin-bottom: 30px;
    }
    #section7 h3::after{
        width: 350px;
    }
    .hand, .libra{
        display: none;
    }
    .square_area{
        margin: auto;
    }
    .square{
        /* width: 315px; */
        max-width: 90%;
        height: 165px;
        box-shadow: -5px 10px 0 #0948a6;
        font-size: 16px;
    }
    .square4{
        padding: 5px 20px;
    }
    .square3{
        padding: 10px 20px;
    }
    .square4{
        padding-right: 50px;
    }
    .square .title{
        font-size: 18px;
        color: #00428B;
        margin-bottom: unset;
    }
    .square .result{
        font-size: 15px;
        text-indent: -88px;
        margin-left: 80px;
    }
    .square .result span {
        width: 70px;
        height: 25px;
        line-height: 25px;
        margin-right: 15px;
        text-indent: initial;
    }
    .square .result img{
        width: 55px;
        left: 175px;
    }
    .square .result:last-child img{
        left: 225px;
    }
    .square::before {
        border-top: solid 9px #fafafa;
        border-left: solid 6px transparent;
        border-right: solid 6px transparent;
        border-bottom: solid 9px transparent;
        left: calc(50% - 3px);
        bottom: -17px;
    }
    .square::after {
        border-top: solid 9px #0948a6;
        border-left: solid 6px transparent;
        border-right: solid 6px transparent;
        border-bottom: solid 9px transparent;
        position: absolute;
        left: calc(50% - 13px);
        bottom: -27px;
    }
    /* .circle_area{
        position: absolute;
        width: 130px;
        height: 130px;
        margin: auto;
        left: 0;
        right: 0;
        top: 200px;
    } */
    /* .circle {
        width: 130px;
        height: 130px;
        font-size: 18px;
        padding-top: 28px;
    } */
    .circle.active {
        border: solid 5px #0948a6;
    }
    
    .circle.active:before{
        bottom: -24px;
    }
    .circle p {
        border-radius: 15px;
        /* line-height: 30px; */
        font-size: 15px;
        margin: 3px auto;
    }  


    /* .circle_area{
        display: none;
    } */
    .dot_area {
        justify-content: center;
        margin-top: 370px;
        margin: 220px auto 0;
        display: none;
    }

    .circle_area_m{
        /* display: block; */
        width: 200px;
        height: 130px;
        margin: auto;
        margin-top: 50px;
    }
    .circle_area_m .circle{
        position: relative;
        width: 130px !important;
        margin: auto;
    }

    .circle_area_m .slick-dots li button:before{
        margin-top: 20px;
        font-size: 30px;
    }
    .circle_area_m .slick-dots li.slick-active button:before{
        color: #0948a6;
    }
    footer{
        padding: 50px 20px;
        height: auto;
    }
    footer .container{
        display: block;
    }
    .footer-l{
        justify-content: center;
    }
    .footer-r{
        text-align: center;
        margin-top: 20px;
        color: #426072;
    }
    #section3-1 h2{
        padding-top: 30px;
    }
    #section3-2{
        padding-bottom: 30px;
    }
}
@media screen and (max-width: 768px){
    .circle_area{
        margin-top: -50px;
        margin-bottom: 10px;
    }
    .circle{
        width: 90px;
        height: 90px;
        margin: 10px;
    }
    .circle:after{
        border-top: solid 6px transparent;
        border-left: solid 8px  #0948a6;
        border-right: solid 6px  transparent;
        border-bottom: solid 6px transparent ;
        left: -15px;
        top: calc(50% - 6px)
    }
    .circle.active:before{
        border-top: solid 8px #0948a6;
        border-left: solid 6px  transparent;
        border-right: solid 6px  transparent;
        border-bottom: solid 6px transparent ;
        bottom: -17px;
    }
}

@media screen and (max-width: 600px){
    #section1{
        min-height: unset;
    }
    .kvtitle{
        width: 260px;
    }
    .kvline{
        display: none;
    }
    .kvline_m{
        display: block;
        top: -166px;
    }
    .scroll_area{
        right: 0px;
    }
    .work_slide ul li p{
        width: 300px;
    }
    /* .who_slide .slide2{        
        border-left: solid 10px #fafafa;
        border-right: none;
    } */
    #section6{
        background-size: 100%;
        background-position: center top;
        background-attachment: unset;
        padding-bottom: 20px;
    }
    #section1{
        background-image: url(img/kv_m.jpg);
    }
    .slide4title{
        width: 80%;
    }
    .slide4 p{
        width: 80%;
        text-indent: -19px;
        padding-right: -19px;
    }
    .work_slide .slide2 ul li:first-child p,
    .work_slide .slide3 ul li:first-child p {
        width: 300px;
    }
}

@media screen and (max-width: 520px){
    .xsbr{
        display: none;
    }
    nav{
        padding: 20px 20px;
    }
    .section5_wrapper {
        width: 300px;
    }
    .map_detail{
        width: 200px;
        line-height: 1.25;
        font-weight: 500;
    }
    .block4 {
        box-shadow: -10px 20px 0 #ffbe23;
    }
    .block4 .how_title{
        width: 80%;
        left: 20px;
    }
    .work_slide_text {
        width: 95%;
    }
    .work_slide ul{   
        padding-left: 15px;
    }
    .work_slide .slide2 ul li:first-child p,
    .work_slide .slide3 ul li:first-child p{
        font-size: 24px;
    }
    .work_slide .slide1 ul li:first-child p{
        top: 8px;
    }
    .work_slide ul li p{
        left: 100px;
        width: 210px;
        line-height: 1.25;
        font-weight: 400;
        font-size: 15px;
    }
    .work_slide .slide2 ul li:first-child p,
    .work_slide .slide3 ul li:first-child p {
        left: 85px;
        width: 210px;
    }
    .who_slide .slide1 {
        border-left: solid 30px #fafafa;
    }
    .who_slide .slide2 {
        /* float: right; */
        border-right: none;
        border-left: solid 30px #fafafa;
    }
    .who_slide_title {
        padding-right: 30px;
    }
    .work_slide .slide.slide4{
        height: auto;
    }
    .six {
        left: -25px;
    }
    .three{
        left: -25px;
    }
    .triangle {
        border-top: solid 60px #fafafa;
        border-left: solid 50vw transparent;
        border-right: solid 50vw transparent;
        border-bottom: solid 50px transparent;
        top: 110px;
    }
    .mt60{
        margin-top: 60px;
    }
    footer{
        font-size: 12px;
    }
    footer img{
        width: 100px;
        font-weight: normal;
        margin-right: 30px;
    }
    .circle_area{
        margin-top: -20px;
        margin-bottom: 10px;
    }
    .circle{
        width: 85px;
        height: 85px;
        margin: 5px;
    }
    .circle p{
        font-size: 14px;
    }
    .circle:after{
        left: -8px;
    }
    .circle.active:after{
        left: -11px;
    }
    .circle.active p:after{
        width: 80px;
        height: 80px;
        bottom: -20px;
    }
}
@media screen and (max-width: 480px){
    .square .result:last-child img {
        right: -20px;
        top: -30px;
        left: unset;
    }
}
@media screen and (max-width: 400px){
    .circle {
        width: 75px;
        height: 75px;
        margin: 5px;
    }
    .square .result img{
        width: 55px;
        left: 144px;
    }
    .square .result:last-child img {
        right: -45px;
        top: -30px;
        left: unset;
    }
}