@media screen and (max-width:1400px){
    .inner {padding: 0 40px;}
    .new_quickmenu {padding: 14px 0 0px 0;}
    .new_quickmenu a {width: 78px; height: 85px;}
    .new_quickmenu a p {font-size: 12px;}
    #header.fixed .inner {padding: 20px;}

    #custom .box_wrap {gap: 20px;}

    #crm {padding: 120px 20px;}

    #phone {padding: 0 20px;}

    #call .left p.blue {margin: 50px 0 110px 0;}
    #call .right .back {width: 670px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}
    #call .right .phone {width: 380px;}

    #use .box_wrap .box.text {gap: 50px;}

    #app a.video_2 {top: 34.3%;left: 50%;transform: translateX(-50%);}
    #app a.video_3-1 {top: 65%;left: 26.4%;}
    #app a.video_3-2 {top: 63.5%;right: 26.6%;}
    #app a.video_4-1 {bottom: 1.7%;left: 34.4%;}
    #app a.video_4-2 {bottom: 1.7%;right: 26.7%;}
}
@media screen and (max-width:1300px){
    #custom .box_wrap {flex-direction: column;}

    #use .box_wrap .box.text {flex-direction: column; align-items: flex-start; gap: 20px;}
    
}
@media screen and (max-width:1200px){
    .inner {padding: 0 40px;}
    #customer .right > div[class^="box_"] {width: 130px;}

    #share .box_wrap .box .image_wrap img {width: 90%;}

    #use .box_wrap .box {height: 340px;}
    #use .box_wrap .box.text .left {font-size: 1.4rem;}
    #use .box_wrap .box.text .right p {font-size: 1rem;}
    #use .box_wrap .box.text .right a {position: absolute; top: 40px;  right: 40px;}

    #app img {width: 90%;}
    #app a {width: 11%;}
    #app a.video_2 {top: 33.7%;left: 50.3%;transform: translateX(-50%);}
    #app a.video_3-1 {top: 64.7%;left: 20.3%;}
    #app a.video_3-2 {top: 63.2%;right: 20.6%;}
    #app a.video_4-1 {bottom: 1.7%;left: 30.4%;}
    #app a.video_4-2 {bottom: 1.7%;right: 20.7%;}

    #footer .top,
    #footer .bottom {flex-direction: column; align-items: center;}
    #footer .bottom .right {margin: 30px 0 0 0;}
    #footer .top .right {margin: 30px 0 0 0;}
}
@media screen and (max-width:1100px){
    #customer .right {gap: 60px;}
    #crm .image_wrap img.block {width: 84%;}
    #crm .image_wrap img.bubble { right: 8%; top: 26%; width: 37%;}

    #share .box_wrap {padding: 50px 30px 30px 30px;  border-radius: 20px;}
    #share .box_wrap .box .image_wrap {height: 160px;}
}
@media screen and (max-width:1000px){
    #customer {padding: 0 0 70px 0;}
    #customer .inner {flex-direction: column; align-items: center; justify-content: center; }
    #customer .sub_title {text-align: center;}
    #customer .left {padding: 50px 0 20px 0;}
    
    #phone .left {width: 50%;}
    #phone .right {width: 50%;}
    #phone .right img {width: 85%; margin:20px 0 0 0;}
    #phone .right .sub_title {width: 100%;}

    #call {padding: 90px 0 0 0;}
    #call .left {width: 500px;}
    #call .right {width: calc(100% - 500px)}

    #share .box_wrap {flex-direction: column; align-items: center; gap: 30px; padding: 50px 30px 50px 30px;}
    #share .box_wrap .box {width: 100%; max-width: 400px; padding: 40px 20px;}

    #package .box_wrap_bottom .box {padding: 50px 36px 40px 36px;}
    #package .box_wrap_top .box {padding: 40px 0 50px 0;}
    #package .box_wrap_top .box .title {font-size: 1.4rem;}
    #package .box_wrap_bottom .box .title {font-size: 1.4rem;}
    #package .box_wrap_top .box .text {font-size: 0.9rem;}
    #package .box_wrap_bottom .box .plus { top: -37px; left: 50%; transform: translateX(-50%); width: 50px;}
    #package .box_wrap_bottom .box .icon {top: 51px;}

    #use .box_wrap {display: flex; flex-direction: column; align-items: center;}
    #use .box_wrap_2 {flex-direction: column-reverse}
    #use .box_wrap .box {width: 100%; max-width:440px;}
    #use .box_wrap .box.text img {display: none;}

    #app a.video_3-1 {top: 65.4%;left: 20.6%;}
    #app a.video_3-2 {top: 64%;right: 21.1%;}
    #app a.video_4-1 {bottom: 1.7%;left: 30.4%;}
    #app a.video_4-2 {bottom: 1.7%;right: 20.7%;}

    #last p {font-size: 1.8rem;}
    #last .inner {height: 530px;}

    #footer .top .left {display: block;}
    #footer .top .left .logo {margin: 0;}
    #footer .top .left .logo img {margin: 0 auto 30px;}
    #footer .top .left a {margin: 0 10px;}
    #footer .bottom .left {grid-template-columns:  1fr;}
    #footer .bottom .right {margin: 40px 0 0 0;}
}
@media screen and (max-width:860px){
    #phone .inner {flex-direction: column-reverse; align-items: center; position: relative; padding: 70px 70px 0 70px;}
    #phone .right .sub_title {text-align: center;}
    #phone .left,
    #phone .right {width: 100%;}
    #phone .right img {display: none;}
    #phone .left img {margin: 50px auto 0; width: 100%;}
}
@media screen and (max-width:800px){
    #crm .inner {border-radius: 70px;}
    #crm .image_wrap img.block {width: 90%; max-width: 240px;}
    #crm .image_wrap img.bubble {right: -1%; top: 9%; width: 50%;}
    #crm .image_wrap img.icon {top: 7%; left: 7%; width: 18%;}

    #case img.top {max-width: 300px;}
    #case .content img {max-width: 500px !important;}

    #call .inner {flex-direction: column; align-items: center; }
    #call .left,
    #call .right {width: 100%;}
    #call .left .sub_title {text-align: center;}
    #call .left p.blue {text-align: center; margin: 50px 0 40px 0;}
    #call .right .phone {position: relative !important; bottom: inherit !important; width: 340px !important;}

    #package .box_wrap_top .box .title {font-size: 1.2rem;}
    #package .box_wrap_bottom .box .title {font-size: 1.2rem;}
    #package .box_wrap_top .box > span {font-size: 0.8rem;}
    #package .box_wrap_bottom .box span {font-size: 0.8rem;}
    #package .box_wrap_bottom .box {padding: 50px 20px 40px 20px;}
    #package .box_wrap_bottom .box p {font-size: 0.9rem}
    #package .box_wrap_bottom .box .icon {right: 20px;}

    #app img {width: 100%;}
    #app a {height: 34px;}
    #app a.video_3-1 {top: 65.8%;left: 18.6%;}
    #app a.video_3-2 {top: 64.3%;right: 19.1%;}
    #app a.video_4-1 {bottom: 1.4%;left: 29.4%;}
    #app a.video_4-2 {bottom: 1.4%;right: 18.9%;}
}
@media screen and (max-width:767px){
    .new_quickmenu {display: none;}
}
@media screen and (max-width:700px){
    #case .content_wrap .content {border-radius: 30px;}
    #case .btn_wrap div span {width: 24px; height: 24px;}

    #call .right .back {  width: 500px;}
    #call .right .phone { width: 260px !important;}
    #call .left p.blue { margin: 30px 0 40px 0;}

    #package .box_wrap_bottom {flex-direction: column; gap: 30px; align-items: center;}
    #package .box_wrap_bottom .box {width: 100%; max-width: 400px;}

    #app a {width: 15%;}
    #app a.video_2 { top: 35.2%; left: 49.1%;}
    #app a.video_3-1 {top: 65.5%;left: 19%;}
    #app a.video_3-2 {top: 64.1%;right: 19.7%;}
    #app a.video_4-1 {bottom: 1.4%;left: 20.3%;}
    #app a.video_4-2 {bottom: 1.6%;right: 19.9%;}

    #last .inner {height: 360px;}
    #last p {font-size: 1.3rem; margin: 0 0 40px 0;}
    #last .btn_wrap a {font-size: 0.9rem; padding: 16px 31px;}
    #last .btn_wrap a img {width: 18px;}
}
@media screen and (max-width:680px){
    html {font-size: 14px;}
    .inner {padding: 0 20px;}

    #header .menu {display: none;}

    #crm {padding: 70px 20px}
    #crm .image_wrap img.pc {width: 70%;}
}
@media screen and (max-width:620px){
    #visual .text {margin: 80px 0 0 0;}
    #visual .text h2 {font-size: 2.2rem;}
    #visual .image_wrap .back {width: 81%;}
    #visual .image_wrap .icon {left: 6.1%;width: 84%;top: 10%;}
    #visual .image_wrap .photo_1 {width: 38%;top: 40%;left: 31.7%;}
    #visual .image_wrap .photo_2 {top: 33%;left: 28%; width: 14%;}
    #visual .image_wrap .bubble_1 {width: 28%;bottom: 15%;left: 8%;}
    #visual .image_wrap .bubble_2 {width: 25%;top: 45%;right: 17%;}
    
}