@media screen and (max-width:1700px){
    #visual .icon_1 {width: 90px; height: 90px;}
    #visual .icon_1 img {width: 100%;}
}
@media screen and (max-width:1600px){
    .inner {padding: 0 20px}
    html {font-size: 15px;}
    #header .inner {padding: 30px 20px;}
}
@media screen and (max-width:1400px){
    #visual .visual_pc {width: 64%;}
    #visual .inner {border-radius: 20px;}
    #visual .icon_1 {width: 100px; height: 100px; bottom: 37%;}
    #visual .icon_1 img {width: 150%}
    #visual .icon_2 {top: 56%; right: 12%; width: 12%;}
    #visual .icon_3 {width: 22%; left: 13%;}
    #visual .icon_6 {width: 18%;}

    section.subtitle .container {padding: 80px 70px; border-radius: 20px;}
    section.subtitle .text,
    section.subtitle .pagenation {position: relative; z-index: 2;}
    section.subtitle .back {right: 40px;}
    section.subtitle .container {overflow: hidden}

    .pro_crm_section_3 .box_wrap {gap: 30px;}

    .add_section_1 .inner {flex-direction: column; align-items: center; text-align: center;}
    .add_section_1 .right {width: 80%;}
    .add_section_1 .right .box {text-align: left;}
}
@media screen and (max-width:1300px){
    .inner_1300 {width: 100%; padding: 120px 20px;}
    .inner {padding: 0 20px} 

    #section_3 .inner_1300 {display: block;}    
    #section_3 .inner_1300 .left {display: flex; flex-direction: column; align-items: center; text-align: center;}
    #section_3 .tag_wrap {flex-direction: column}
    #section_3 .tag_wrap .tag {margin: 20px 0 0 0; display: flex; gap: 20px;}
    #section_3 .tag_wrap .more {position: inherit; bottom: auto; right: auto; margin: 30px 0 50px 0;}
    #section_3 .right {justify-content: center; width: 100%; max-width: 700px; margin: 0 auto;}
    #section_3 .right .bubble {left: 8%; width: 34%;}

    #section_6 .track img {width: 210px;}
    #section_6 .marquee {margin: 70px 0 0 0;}

    .full_container .full_right {width: 100%; margin-left: 0; }
    .full_container .full_right .left {padding: 0 0 0 20px;}

    .full_container .full_left {width: 100%; margin-right: 0; }
    .full_container .full_left .right {padding: 0 20px 0 0;}
    .full_container .full_left .right {width: 40%;}

    .sale_mgm_section_2 .box_wrap .box {padding: 60px 30px}
    .sale_mgm_section_2 .box_wrap .box img {height: 76px;}

    .sale_mgm_section_3 .right {width: 50%;}
    .sale_mgm_section_3 .right img {width: 100%;}
    
}
@media screen and (max-width:1200px){
    #visual .icon_1 {width: 80px; height: 80px; }
    #header .inner {padding: 30px 0;}
    html {font-size: 14px;}

    #footer .top .inner {flex-direction: column; align-items: center; text-align: center}
    #footer .top .inner .center {margin: 40px 0 20px 0;}
    #footer .top .inner .center ul {justify-content: center; margin: 0 0 14px 0;}
    #footer .bottom .inner .top {flex-direction: column; align-items: center; text-align: center;}
    #footer .bottom .inner .bottom {flex-direction: column; align-items: cetner; text-align: center;}
    #footer .bottom .inner .bottom .left {grid-template-columns: 1fr; margin: 60px auto 40px;}
    #footer .bottom .inner .bottom .left .box {justify-content: center;}
    #footer .bottom .inner .bottom .right {margin: 0 auto; align-items: center;}
    #footer .bottom .inner .top img {margin: 0;}

    .sale_call_section_1 .right {padding: 0; width: 50%;}
    .sale_call_section_1 .main_tit a.more.icon {justify-content:flex-start}

    .pro_crm_section_3 .box_wrap {display: grid; grid-template-columns:  1fr 1fr 1fr;}

    .add_section_1 .right {width: 100%;} 
    .add_section_1 .right .box {padding: 30px;}

    .add_section_6 .inner {gap: 50px;}

    .join_section_2 .box_wrap a {background:#fff; box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
    .join_section_2 .box_wrap a span { background: #E4DEFF; color: var(--main-color);  font-family: 'pre_M';}
}
@media screen and (max-width:1000px){
    #header {display: none;}
    #header_m {display: block;}
    #header_m { position: fixed;  top: 0;  left: 0;  width: 100%; background: #fff; z-index: 5;  padding: 0 20px; }
    #header_m .inner { display: flex; align-items: center;  justify-content: space-between; height: 70px; }
    #header_m h1 img {height: 28px;}

    #mo_gnb {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 6; background: #00000091; }
    #mo_gnb.is-open { display: block; }

    #mo_gnb .container { position: fixed; top: 0; right: 0; background: #fff; padding: 27px 43px; height: 100vh; width: 70%; max-width: 430px; }
    #mo_gnb .top { display: flex; justify-content: right; }
    #mo_gnb .menu { margin: 20px 0 0 0; }
    #mo_gnb .menu > a { font-size: 1.9rem; display: block; padding: 10px 0; color: var(--main); }
    #mo_gnb .menu .submenu { padding: 10px 20px; }
    #mo_gnb .menu .submenu a { font-size: 1.6rem; display: block; padding: 7px 0; color: #555; font-family: 'pre_L'; }
    #mo_gnb .bottom { position: absolute; bottom: 50px; }
    #mo_gnb .bottom { display: flex; align-items: center; gap: 29px; }
    #mo_gnb .bottom a { display: flex; gap: 10px; align-items: center; }
    #mo_gnb .bottom a img { height: 15px; }
    #mo_gnb .bottom a span {font-family: 'pre_SB'}
    #mo_gnb .bottom a p { font-size: 15px; }
    #mo_gnb .bottom a.online span {color: var(--main-color)}

    #visual {margin: 70px 0 0 0;}
    section.subtitle {margin: 70px 0 0 0;}

    .sale_mgm_section_2 .box_wrap {margin: 50px 0 80px 0; grid-template-columns: 1fr 1fr;}
    .sale_mgm_section_2 .step.wrap img {width: 100%; max-width: 400px;}

    .add_section_11 .phone_wrap {width: 100%; max-width: 700px;}
    .add_section_11 .box_wrap .container {display: block; margin: 0 auto; width: 100%; max-width: 300px;}
    .add_section_11 .box_wrap .container .box {width: 100%; margin: 12px 0;}
}
@media screen and (max-width:800px){
    .add_section_9 .image_wrap {display: none;}
    .add_section_9 .slider { position: relative; overflow: hidden; width: 100%; max-width: 900px; margin: auto; display: block;}
    .add_section_9 .slider-track { display: flex; animation: slide 15s infinite; will-change: transform; margin: 40px 0 0 0;}
    .add_section_9 .slide { flex: 0 0 100%; min-width: 100%; display: flex; align-items: center; justify-content: center; }
    .add_section_9 .slide img { height: 300px; }
    @keyframes slide {
        0%, 30%   { transform: translateX(0%); }
        33%, 63%  { transform: translateX(-100%); }
        66%, 96%  { transform: translateX(-200%); }
        100%      { transform: translateX(0%); }
    }

    .join_section_2 .box_wrap {gap: 30px;}
    .join_section_2 .box_wrap a {padding: 40px 60px;}
    .join_section_2 .box_wrap a img {height: 80px;}

    section.subtitle .container {padding: 80px 40px;}
    @keyframes growHeight {
        from { height: 0; padding: 0;}
        to { height: 100%; padding: 80px 40px;}
    }

    #go_top {width: 70px; height: 70px;}

}
@media screen and (max-width:900px){
    #visual .visual_pc {width: 81%;}
    #visual .icon_1 {right: 24%; bottom: 34%;}
    #visual .icon_2 {top: 62%;  right: 3%;   width: 17%;}
    #visual .icon_3 {width: 30%; left: 10%;}
    #visual .icon_6 {width: 28%;}

    .main_tit a.more {justify-content: center;}
    .main_tit h3 {font-size: 2.4rem;}

    #section_1 .inner_1300 {display: block; align-items: center; text-align: center;}
    #section_1 .right {display: flex; justify-content: center;}
    #section_1 .yt_wrap {margin: 80px 0 0 0; width: 100%; max-width: 540px}

    #section_2 .inner_1300 {gap: 50px; flex-direction: column; align-items: center; padding: 80px 0;}
    #section_2 .left img {width: 100%; max-width: 280px}
    #section_2 .right {padding: 20px 0 0 0; text-align: center;}

    #section_4 .image_wrap {margin: 70px 0 0 0; gap: 20px;}
    #section_4 .image_wrap img {width: calc(50% - 10px);}

    #section_6 .track img {width: 160px;}

    .sub_easy .box img {margin: 0 0 30px 0;}

    .sale_call_section_2 .inner_1300 {gap: 6vw;}
    .sale_call_section_2 .left {width: 40%;}

    .sale_call_section_3 .box_wrap img {width: 36%;}

    .full_container {padding: 80px 0;}
    .full_container .full_right {flex-direction: column;  align-items: end; padding: 50px 0;} 
    .full_container .full_right .left {width: 100%;}
    .full_container .full_right .right {width: 50%; margin: 30px 0 0 0;}

    .full_container .full_left {flex-direction: column-reverse;  align-items: start; padding: 50px 0; } 
    .full_container .full_left .right {width: 100%; text-align: right; }
    .full_container .full_left .left {width: 50%; margin: 30px 0 0 0;}
    .full_container .full_left a.more.icon {justify-content: end;}

    .sale_crm_section_1 .box_5 .pop_1 {top: 10%;}

    .sale_mgm_section_3 .inner {flex-direction: column; align-items: center; text-align: center; gap: 40px;}
    .sale_mgm_section_3 .right {width: 100%; max-width: 500px;}

    .add_section_2 .image_wrap {margin: 50px auto 0;}
    .add_section_2 .image_wrap img {display: none;}
    .add_section_2 .image_wrap img.mo {display: block; width: 100%; max-width: 330px;}

    .add_section_3 .image_wrap {margin: 40px 0 30px 0;}
    .add_section_3 .box_wrap {display: grid; grid-template-columns: 1fr; margin: 0 auto; width: max-content}
    .add_section_3 .box_wrap .box {width: 300px;}

    .add_section_4 .image_wrap {margin: 50px auto 0;}
    .add_section_4 .image_wrap img {display: none;}
    .add_section_4 .image_wrap img.mo {display: block; width: 100%; max-width: 280px;}

    .add_section_5 .image_wrap {margin: 50px auto 0;}
    .add_section_5 .image_wrap img {display: none;}
    .add_section_5 .image_wrap img.mo {display: block; width: 100%; max-width: 280px;}

    .add_section_6 .inner {flex-direction: column; align-items: center; text-align: center;}
    .add_section_6 .right {width: 100%; max-width: 560px;}

    .add_section_7 .inner {flex-direction: column-reverse; align-items: center; text-align: center;}
    .add_section_7 .left {width: 100%; max-width: 750px}

    .add_section_8 .image_wrap {margin: 50px auto 0;}
    .add_section_8 .image_wrap img {display: none;}
    .add_section_8 .image_wrap img.mo {display: block; width: 100%; max-width: 280px;}

    .add_section_10 .inner {flex-direction: column; align-items: center; text-align: center;}
    .add_section_10 .left .icon_wrap {margin: 20px 0 0 0; justify-content: center;}
    .add_section_10 .right {width: 100%; max-width: 500px;}

    .join_section_1 .btn_wrap a {padding: 24px 40px;}
}
@media screen and (max-width:700px){
    .inner_1300 {padding: 80px 20px;}    

    .sub_easy .box_wrap {flex-direction: column; align-items: center; text-align: left; gap: 70px;}
    .sub_easy .box {flex-direction: row; gap: 50px; width: 100%; max-width: 360px}
    .sub_easy .box .content {align-items: start;}
    .sub_easy .box .text {text-align: left;}
    .sub_easy .box img {width: 120px; height: auto;}
    .sub_easy .btn .circle { margin-right: 0;}
    .sub_easy .btn .text {max-width: 300px;opacity: 1;}
    .sub_easy .box .btn .text { margin-left: -20px;}

    #visual .icon_1 {width: 70px; height: 70px;}
    #visual .text h2 {font-size: 2.3rem;}
    #visual .text h3 {font-size: 1.4rem;}
    #visual .text .btn_wrap a {padding: 11px 19px;}
    #visual .text .btn_wrap a img {height: 12px;}

    .main_tit h3 {font-size: 2.1rem; margin: 0 0 20px 0;}
    .main_tit p {font-size: 1rem;}
    .main_tit a.more {margin: 30px 0 0 0;}
    .main_tit a p {margin: 0 20px 0 0;}

    #section_2 .left img {max-width: 230px;}
    #section_2 .right {padding: 0;}
    .main_tit a.more.icon > img {height: 23px;}

    #section_3 .tag_wrap .tag {flex-direction: column; align-items: center; gap: 0;}
    #section_3 .tag_wrap .tag > div {margin: 8px 0;}

    #section_4 .image_wrap {flex-direction: column; align-items: center;}
    #section_4 .image_wrap img {width: 100%; max-width: 400px;}

    #section_5 .image_wrap {margin: 60px 0 0 0;}

    .sale_call_section_1 .inner_1300 {flex-direction: column; align-items: center; text-align: center; padding: 80px 0; gap: 40px;}
    .sale_call_section_1 .left {width: 100%; max-width: 220px;}
    .sale_call_section_1 .main_tit a.more.icon {justify-content: center}

    .sale_call_section_2 .inner_1300 {flex-direction: column; align-items: center; text-align: center;}
    .sale_call_section_2 .left {width: 100%;}
    .sale_call_section_2 .right {width: 90%; max-width:250px;}
    .sale_call_section_2 .right img {transform: translateX(20px);}

    .sale_call_section_3 .inner_1300 {padding: 80px 20px 150px 20px;}
    .sale_call_section_3 .box_wrap {margin: -30px 0 0 0;}
    .sale_call_section_3 .box_wrap img {margin: 0 -19px;}

    .full_container .full_right .right {width: 55%;}
    .full_container .full_left .left {width: 55%;}

    .add_section_1 {padding: 120px 0 130px 0}
    .add_section_1 .right {margin: 50px 0 0 0}
    .add_section_1 .right {grid-template-columns: 1fr 1fr;}
    .add_section_1 .right .box:nth-child(2),
    .add_section_1 .right .box:nth-child(5),
    .add_section_1 .right .box:nth-child(8) {
        transform: translateY(0);
    }

    .add_section_1 .right .box:nth-child(3),
    .add_section_1 .right .box:nth-child(6),
    .add_section_1 .right .box:nth-child(9) {
        transform: translateY(0);
    }

    .add_section_1 .right .box:nth-child(2),
    .add_section_1 .right .box:nth-child(4),
    .add_section_1 .right .box:nth-child(6),
    .add_section_1 .right .box:nth-child(8) {
        transform: translateY(100px);
    }

    .add_section_9 .image_wrap {margin: 40px auto 0;}

    .add_section_11 .phone_wrap {margin: 40px auto 0;}
    .add_section_12 .box_wrap {margin: 40px auto 0; gap: 16px;}  
    .add_section_12 .box_wrap .box {padding: 30px 20px;}
    .add_section_12 .box_wrap .box img {height: 60px;}
    .add_section_12 .box_wrap .box .text {font-size: 0.9rem;}
    .add_section_12 .box_wrap .box .text span {font-size: 1rem;}
}