@media screen and (max-width:1500px){
    
}
@media screen and (max-width:1280px){
    .inner {padding: 0 40px;}
    html {font-size: 15px;}
    .new_quickmenu .inner {padding: 0}
    #visual .back {top:19%; left: 50%; transform: translateX(-50%);}
    #visual .pc {width: 79%;}
    #visual h1 {font-size: 2.9rem;}
    #visual a.btn {font-size: 1.3rem; width: 180px; height: 60px; }
    #join .tab-content .content .image_wrap {padding: 60px 50px;}
    #join .tab-content .content .image_wrap img {height: auto; width: 100%;}

    #review .review_flow img {width: 360px;}

    #feat .content .box_wrap { flex-direction: column; }
    #feat .content .box_wrap .box { display: flex; gap: 30px; align-items: center; width: 100%; max-width: 730px; margin: 0 auto; padding: 20px 40px; }
    #feat .content .box_wrap .box .left { width: 60%; }
    #feat .content .box_wrap .box .txt { width: 40%; }
    #feat .content .box_wrap .box .name { text-align: left; font-size: 1.2rem; }
    #feat .content .box_wrap .box img { width: 100%; }

    #add .content {gap:20px}

    #footer {padding: 50px 0 0 0;}
    #footer .top {flex-direction: column;align-items: center;}
    #footer .top .sns {margin: 20px 0 0 0;}
    #footer .top .wrap { flex-direction: column;  gap: 20px;}
    #footer .center { padding: 40px 0;}
    #footer .center .wrap { display: flex;  align-items: center;  justify-content: center;}
 
}
@media screen and (max-width:1024px){
    .new_quickmenu {display:none;}
    #header {display:none;}
    #header_m {display:block; border-bottom: 1px solid #ddd}
    #header_m {position:fixed;top:0;left:0;width:100%;background:#fff;z-index:5;padding: 14px 0;}
    #header_m .inner {display:flex; justify-content:space-between; align-items:center;}
    #header_m .logo a {height: 50px;display: flex;align-items: center;justify-content: center;}
    #header_m .menu_btn {width:50px; height:50px; display:flex; align-items:center; justify-content:flex-end;}
    #header_m .menu_btn img {width:30px;}
    #m_menu {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:#000000a1; z-index:6;}
    #m_menu.open { display: block;}
    #m_menu .inner {position:absolute; top:0; right:0; widht:; width:100%; background:#fff; height:100%; max-width:500px; padding:20px 40px;}
    #m_menu .top {display:flex; align-items:center; justify-content:space-between;}
    #m_menu .top .btn {display:flex; gap:10px;}
    #m_menu .top .btn a {width:33px; height:33px; display:flex; align-items:center; justify-content:flex-end;}
    #m_menu .top .btn a img {width:22px;}
    #m_menu .menu {margin:60px 0 0 0; display:flex; flex-direction:column; gap:20px;}
    #m_menu .menu a {font-size:2rem;}
    #m_menu .bottom {position:absolute; bottom:50px; left:40px; width:calc(100% - 80px);}
    #m_menu .bottom > a {
        display:flex; align-items:center; justify-content:center; background:#f1f1f1;
        height:60px; border-radius:8px; border:1px solid #ddd; font-size:1.2rem; color:#454545; margin:0 0 20px 0; gap:20px;}
    #m_menu .bottom > a img {width:15px;}
    #m_menu .bottom .cs {display:flex; justify-content:space-between; align-items:flex-end;}
    #m_menu .bottom .cs .left p {font-family:'pre_L';}
    #m_menu .bottom .cs .left p span {font-family:'pre_L';}
    #m_menu .bottom .cs .right {font-size:1.8rem;}

    #visual .pc {width: 89%;}
    #visual .text {padding: 110px 0 0 0;}
    #visual h1 {  font-size: 2.7rem;}
    #visual .icon {width: 11%;}
    #visual .icon_1 {bottom: 32%;left: 8%;z-index: ;}
    #visual .icon_2 {left: 2%;bottom: 23%;}
    #visual .icon_3 {bottom: 13%;left: 9%;}
    #visual .icon_4 {bottom: 6%;left: 18%;}
    #visual .icon_5 {bottom: 2%;left: 28.3%;}
    #visual .icon_7 {width: 21%;}

    #one .subtitle {display: block;}
    #one .track .flow img {width: 260px; border-radius: 17px;}
    #one .track {padding: 50px 0 0 0}

    #whycrm .box {border-radius: 30px;}
    #whycrm .box .text .title {font-size: 1.5rem;}
    #whycrm .box .text .title img {height: 23px;}
    #whycrm .box {padding: 70px 50px 0 50px;}
    #whycrm .box.bottom {height: 460px;}
    #whycrm .box .image {width: 36%;}

    #add .content { flex-direction: column-reverse; justify-content: center; align-items: center; width: 100%; max-width: 500px; margin: 0 auto; }
    #add .content .image { width: 100%; }
    #add .content .text { display: flex; flex-direction: column-reverse; width: 100%; max-width: 500px; }
    #add .content .word .txt { height: auto; margin: 0 0 20px 0; }
    #add .content .track { width: 100%; max-width: 400px; margin: 0 auto 30px; }
  
    #banner { height: 130px; display: flex; align-items: center; overflow: hidden; }
    #banner .inner img { width: 20%; }
    #banner .inner .text p { font-size: 1.3rem; }
    #banner .inner img.right { width: 150px; transform: translateY(15px); }

    #join .subtitle img {width: 500px}
}
@media screen and (max-width:820px){
    .subtitle .main {font-size: 2.1rem;}
    #one .subtitle span {padding: 4px 10px;}
    .subtitle span {padding: 4px 10px;}

    #header_m {padding: 4px 0;}
    #header_m .logo a img  {width: 140px;}
    #header_m .menu_btn img {width: 20px;}

    #visual .text {padding: 80px 0 30px 0;}
    #visual h1 { font-size: 2.5rem; line-height: 1.3; }
    #visual h1 img { width: 40px; }
    #visual a.btn { margin: 20px auto; }
    #visual .back { top: 17%; }
    #visual .icon_7 { right: 4%; }

    #whycrm .box.top { width: 100%;  max-width: 500px; margin: 0 auto 30px; flex-direction:column;}
    #whycrm .box.top .image {width: 100%; }
    #whycrm .box.top .image img {width: 70%; float: right;}
    #whycrm .box.top .text {gap: 30px;}
    #whycrm .box.top .text {transform: none;gap: 20px;}
    #whycrm .box.top .image {margin:50px 0 0 0;}
    #whycrm .box_wrap {flex-direction: column; align-items: center; width: 100%; }
    #whycrm .box.bottom {width: 100%; max-width: 500px;}

    #review .subtitle .main {text-align: center;}

    #another .flow img {width: 120px;}

    #banner {  height: auto;}
    #banner .inner {  flex-direction: column; height: auto;}
    #banner .inner img {width: 180px;}
    #banner .inner img.right { transform: none;}

    #join .subtitle img {width: 420px;}
    #join .tab .tab-btn {font-size: 1rem; word-break: keep-all}

    #footer .center .wrap {flex-direction: column; gap:10px;}
    #footer .top .wrap > .menu {flex-direction: column; display: flex}
    #footer .top .wrap .menu p {margin: 0}

    .floating {width: 390px; display: flex; align-items: center; justify-content: center;}
}
@media screen and (max-width:700px){
    .inner {padding: 0 20px;}
    #visual .text h1 {  font-size: 2.1rem;    }
    #visual .text h1 img {  width: 30px;    }
    #visual .text .btn {  width: 155px;  height: 50px; font-size: 1.2rem;    }
    #visual .text .btn img { width: 20px; }
   
}
@media screen and (max-width:600px){
    .subtitle .main { word-break: auto-phrase;}
    #one .subtitle span,
    .subtitle span {font-size: 0.8rem;}
    .subtitle .main {font-size: 1.5rem;}
    .subtitle .sub {font-size: 1rem;}

    #one {padding: 90px 0 0 0}
    #one .subtitle > div,
    #one .subtitle .sub {text-align: center;}
    #one .track .flow {padding: 0 0 80px 0;}
    #one .track .flow img {width: 240px;}
    
    #visual {margin: 40px 0 0 0;}
    #visual h1 br.mo {display: block;} 
    #visual .back {top:43%;}
    #visual .icon {display: none;}
    #visual .pc {width: 100%;}

    #m_menu .inner {padding: 15px 20px;}
    #m_menu .top .btn {padding: 0;}
    #m_menu .logo img {width: 140px;}
    #m_menu .bottom {bottom: 30px;}
    #m_menu .bottom .cs {flex-direction: column; text-align: center; align-items: center;}
    #m_menu .top .btn a {width: 27px; height: 27px;}
    #m_menu .top .btn a img {width: 16px;}

    #whycrm { padding: 70px 0; }
    #whycrm .subtitle { margin: 0 0 10px 0; }
    #whycrm .box.top { padding: 40px 30px 0 30px; border-radius: 20px; }
    #whycrm .box.bottom { padding: 40px 30px 0 30px; height: 380px; border-radius: 20px; }
    #whycrm .box .text .title { font-size: 1.3rem; }
    #whycrm .box .text .title img { height: 18px; }

    #review {padding: 90px 0;}
    #review .subtitle span {font-size: 1.5rem}
    #review .container {margin: 50px 0 0 0}
    #review .container .gra {display: none;}
    
    #feat .tab { gap: 0; }
    #feat .tab .tab-btn { font-size: 1rem; padding: 14px 0; border-top-left-radius: 20px; border-top-right-radius: 20px; }
    #feat .tab-content { padding: 50px 20px; }
    #feat .sub_text {word-break: break-all}
    #feat .content .sub_text { font-size: 1rem; word-break: auto-phrase; }
    #feat .content .box_wrap .box { flex-direction: column; padding: 20px; gap: 10px; }
    #feat .content .box_wrap .box .left { width: 100%; }
    #feat .content .box_wrap .box .txt { margin: 10px 0 0 0; width: 100%; }
    #feat .content .box_wrap .box .name { font-size: 1rem; text-align: center; }
    #feat .content .box_wrap .box img { margin: 0; }

    #another {padding: 70px 0 0 0;}
    #another .inner {padding: 0;}
    #another .track {    padding: 40px 0 90px 0;}
    #another .track .gra {display: none;}


    #add {padding: 70px 0;}
    #add .content .text .title { font-size: 1.3rem;  margin: 0 0 10px 0; padding: 0 0 0 20px;}
    #add .content .word .txt {font-size: 1rem; padding: 0 0 0 20px;}

    #join {padding: 70px 0;}
    #join .tab .tab-btn p.mo {display: block;}
    #join .tab .tab-btn p.pc {display: none;}
    /* #join .tab {flex-direction: column; gap:10px;}
    #join .tab .tab-btn {width:100%; border-radius: 20px;}
    #join .tab-content {border-radius: 20px; margin: 10px 0 0 0;}
    #join .tab .tab-btn {color: #8b8b8b;} */
    #join .subtitle img {width:310px; margin:10px auto 8px;}

    #exper .left .subtitle .main span {font-size: 1.6rem;}

    .floating { width: 140px; padding: 13px 0;}
    .floating.on {bottom: 20px;}
    .floating p {display: none;}
    .floating span { font-size: 1rem;}

    #footer .top .wrap .menu .menu a {font-size: 0.9rem;}
    #footer .top .wrap .menu {gap: 8px;}
    #footer .center .wrap {gap:3px;}

    #contact {padding:110px 0 100px 0;}
    #contact .title .txt1 {font-size: 1.6rem;}
    #contact .title .txt2 {font-size:1rem;}
    #contact .input_wrap .name {width:80px;}
    #contact .input_wrap .right {    width: calc(100% - 80px);}
    #contact .input_wrap.email {display: block;}
    #contact .input_wrap.email .right {width: 100%;}
    #contact .mail_wrap select {width: 130px;}
    #contact .mail_wrap input {width: calc(50% - 85px); padding: 14px 6px;}


    #contact_com {padding: 140px 0 90px;}
    #contact_com .title {font-size: 1.6rem;}
    #contact_com .sub {font-size: 1rem;}
    #contact_com a {width:140px; height: 50px; font-size: 1rem;}
    #contact_com a img {width:16px;}
    
}