@media screen and (max-width:767px){
    .h_pd_120 {padding: 60px 20px}
    .subtitle {margin: 0 0 30px 0;}
    .subtitle span {font-size: 16px;}
    .subtitle h3 {font-size: 20px; display: none;}
    .subtitle h4 {font-size: 17px; margin: 10px 0 0 0;
    }
    .subtitle .mo {display: block;}

    #header {display: none;}
    #header_mo {
        position: fixed; top: 0; left: 0; width: 100%; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding:20px;
        background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-bottom: 1px solid #e7e7e7;
    }
    #header_mo h1 {width: 120px;}
    #header_mo h1 img {width: 100%;}
    #header_mo .btn {
        position: relative;
        color: #fff; border-radius: 4px; padding: 6px 10px; 
        background: var(--back-color);
        background: linear-gradient(0deg, rgb(33, 120, 251) 0%, rgb(100, 157, 255) 100%);
        user-select: none; overflow: hidden;
        -webkit-user-select: none; overflow: hidden;
    } 
    #header_mo .btn:before {
        position: absolute;
        content: '';
        display: inline-block;
        top: -180px;
        left: 0;
        width: 30px;
        height: 100%;
        background-color: #fff;
        animation: shiny-btn 3s ease-in-out infinite;
    }
    #header_mo .btn img{margin: 0 4px 0 10px}
    @keyframes shiny-btn {
        0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
        80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
        81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
        100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
    }
    
    #main {padding: 120px 0 0 0; height: 780px;}
    #main .title h2 {font-size: 30px; }
    #main .title h3 {text-align: center; font-size: 20px;}
    #main .title h3 br {display: block;}
    #main .title a {font-size: 16px; width: 170px; height: 56px; margin: 20px 0 0 0;}
    #main .phone {width: 445px;}
    #main .phone img {width: 100%;}
    #main .icon {bottom: 40px;}
    #main .icon .box {width: 80px;}

    #once .subtitle h3 span {font-size: 16px; width: 50px; height: 26px; margin: 0 5px 0 12px}
    #once .subtitle h3 span::after {width: 12px; height: 12px; left: -11%; top: 7px;}
    #once .wrap {flex-direction: column; gap: 14px;}
    #once .box {padding: 26px; height: 200px; width: 100%;}
    #once .box span {font-size: 14px;}
    #once .box p {font-size: 18px; margin: 10px 0 0 0;}
    #once .box .image img {width: 160px;}
    
    .spec .wrap {flex-direction: column;}
    .spec.t_blue .wrap {flex-direction: column-reverse}
    .spec.t_blue .text {padding: 0;}
    .spec .text h3 {font-size: 30px; text-align: center;}
    .spec .text h4 {font-size: 20px; text-align: center; margin: 10px 0 0 0;}
    .spec .inner {padding: 60px 20px 0 20px;}
    .spec .image {width: 80%;}
    .spec.t_wh .text {padding: 0;}

    #spec_1 .text {transform: translateY(30px)}
    #spec_1 .inner {padding: 20px 20px 0 20px}

    #spec_2 .text {transform: translateY(50px)}
    #spec_2 .inner {padding: 20px 20px 0 20px}
    #spec_2 .text img {margin: 0 auto 20px;}
    #spec_2 .star.pc {display: none;}
    #spec_2 .star.mo {display: block;}

    #spec_3 .text {transform: translateY(60px)}
    #spec_3 .inner {padding: 20px 20px 0 20px}

    #spec_4 .text {transform: translateY(40px)}
    #spec_4 .inner {padding: 30px 20px 0 20px}
    
    #key .item_1 img {width: 150%;}


    #faq .inner {width: 100%;}
    #faq .faq_item {padding: 16px 0;}
    #faq .faq_item .faq_question .text {font-size: 15px; display: flex; align-items: center;}
    #faq .faq_item .faq_question .text span {font-size: 18px; margin: 0 10px 0 0;}
    #faq .faq_item .faq_question img {height: 6px;}
    #faq .faq_item.active .faq_answer {padding: 20px; font-size: 14px;}
    

    #last {background: url(../images/last_back_m.png) 53% 50%;}
    #last .text h3 {font-size: 20px;}
    #last .text p {font-size: 16px;}

    #footer .left {align-items: flex-start}
    #footer .logo {margin: 0 0 20px 0;}
    #footer .text {display: none;}
    #footer .text.mo {display: block;}
    #footer .text .wrap {justify-content: flex-start}
    #footer .text p {font-size: 12px; margin: 0 0 4px 0; text-align: left;}
    #footer .tell {width: 100%; align-items: flex-start}

    #top_btn {width: 50px; height: 50px; bottom: 50px;}

}
@media screen and (max-width:700px){
    #key .wrap {display: flex; flex-direction: column; gap: 20px; height: auto;}


    #key .wrap2 {flex-direction: column;}
    #key .wrap2 .item {width: 100%; flex:auto; height: 270px}

    #key .item { padding: 30px;}
    #key .item.item_1 {height: 340px;}
    #key .item.item_1 img {width:489px; bottom: -31%; left: -4%;}
    #key .item.item_2 {height: 180px}
    #key .item.item_2 img {width: 114px;}
    #key .item.item_3 {height: 250px}
    #key .item.item_3 img {width: 400px;}
    #key .item.item_4 {height: 220px;}
    #key .item.item_4 img {width: 180px; right: 30px;}
    #key .item.item_5 {height: 220px;}
    #key .item.item_5 img {width: 280px; left: auto; right: 30px; transform: none;}
    #key .item.item_6 {height: 220px;}
    #key .item.item_6 img {width: 120px; right: 30px;}
    
}
@media screen and (max-width:630px){
    #main {height: 660px}
    #main .icon .box {width: 63px}
    #main .phone {width: 324px;}
}


@media screen and (max-width:570px){
    #key .item.item_3 img {width: 310px;}
    #key .item.item_4 img {width: 150px;}
    #key .item.item_5 img {width: 210px;}
    #key .item.item_6 img {width: 100px;}
}
@media screen and (max-width:500px){
    #main {height: 600px;}
    #main .icon .box {width: 50px;}
    #main .phone {width: 264px;}

    .spec .image {width: 100%;}
    .spec .text h3 {font-size: 20px;}
    .spec .text h4 {font-size: 16px;}

    #key .item.item_3 img {width: 260px}
    #key .item.item_4 img {width: 110px;}
}
@media screen and (max-width:450px){
    #key .item.item_1 {height: 310px;}
    #key .item.item_2 img {width: 84px;}
    #key .item.item_3 {height: 230px;}
}