@media screen and (max-width:1680px){
    html {font-size: 14px;}
    .inner {width: 100%; max-width: 100%;}
}
@media screen and (max-width:1350px){
    #history .wrap {width: 750px;}
    #history .box.right {    transform: translateX(66.5%);}
    #history .box.left {     transform: translateX(-67.5%);}
    #history .box .text {text-shadow: 1px 1px 0px #000;}
    #history .box.left .text span {position: relative; z-index: 2;}
}
@media screen and (max-width:1200px){
    html {font-size: 12px;}
    #telecom .top_text .image {background-attachment: inherit;}

    #solution .content .box .left {width: 360px;}
    #solution .content .box .left p {font-size: 1.7rem;}
    #solution .content .box .left .image img {width:60px;}
    #solution .content .box .go {width: 40px; height: 40px;}

    #media .content {grid-template-columns: 1fr 1fr;}

    #client .box_wrap {grid-template-columns: 1fr 1fr 1fr 1fr;}
    #client .box_wrap .box .text p {font-size: 1.2rem;}
}
@media screen and (max-width:1050px){
    #area .m_title {margin: 0 0 60px 0;}
    #area .wrap {display: grid; gap: 10px; grid-template-columns: 1fr 1fr; justify-self: end; padding: 0 40px}
    #area .box {width: 26rem; height: 26rem; }
    #area .wrap .move_1 {transform: inherit; opacity: 1;}
    #area .wrap .move_2 {transform: inherit; opacity: 1;}
    #area .wrap .move_3 {transform: inherit; opacity: 1;}
    #area .wrap .move_4 {opacity: 0;}
    #area .wrap.show .move_1 {animation: none;}
    #area .wrap.show .move_2 {animation: none;}
    #area .wrap.show .move_3 {animation: none;}

    #circle .inner {padding: 120px 40px 140px 40px;}
    #circle .image img {width: 28rem;}
}
@media screen and (max-width:1000px){

    #intro {display: none;}
    html {font-size: 12px;}
    #header {display: none;}
    #header_mo { display: flex;  align-items: center;  justify-content: space-between;  padding: 20px 30px;  position: fixed;  top: 0;  left: 0;  width: 100%;  z-index: 10;}
    #header_mo .logo a { color: #fff;  font-size: 30px;}
    #header_mo .wrap {display: table;}
    #header_mo .icon-wrapper { display: table-cell; text-align: center; vertical-align: middle; }
    #header_mo .icon { position: relative; width: 60px; height: 50px; display: inline-block; cursor: pointer; }
    #header_mo .bar {width: 41px;height: 3px;background-color: #fff;margin: 13px 0;position: absolute;}
    #header_mo .icon .bar.one {top: 0;right: 0;}
    #header_mo .icon .bar.two {top: 10px;right: 0;}
    #header_mo .icon .bar.three {top: 20px;right: 0;}
    #header_mo .icon .bar.one.active { animation: one 1s forwards; }
    #header_mo .icon .bar.two.active { animation: two 1s forwards; }
    #header_mo .icon .bar.three.active { animation: three 1s forwards; }
    #header_mo .icon .bar.one.notActive { animation: one-reverse 1s forwards; }
    #header_mo .icon .bar.two.notActive { animation: two-reverse 1s forwards; }
    #header_mo .icon .bar.three.notActive { animation: three-reverse 1s forwards; }
    @keyframes one { 0% { top: 0; } 30% { top: -5px; } 60% { top: 10px; } 80% { transform: rotate(0); } 100% { top: 10px; transform: rotate(45deg); } }
    @keyframes one-reverse { 0% { top: 10px; transform: rotate(45deg); } 30% { transform: rotate(0); } 60% { top: 10px; } 80% { top: -5px; } 100% { top: 0; } }
    @keyframes two { 0% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes two-reverse { 0% { opacity: 0; } 80% { opacity: 1; } 100% { opacity: 1; } }
    @keyframes three { 0% { top: 20px; } 30% { top: 25px; } 60% { top: 10px; } 80% { transform: rotate(0); } 100% { top: 10px; transform: rotate(-45deg); } }
    @keyframes three-reverse { 0% { top: 10px; transform: rotate(-45deg); } 30% { transform: rotate(0); } 60% { top: 10px; } 80% { top: 25px; } 100% { top: 20px; } }

    .mo_menu { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 9; background: #000; align-items: center; justify-content: center; z-index: 9;}
    .mo_menu ul { transform: translateY(-30px); }
    .mo_menu li { text-align: center; }
    .mo_menu li a { color: #fff; font-size: 5rem; margin: 10px 0; }
    .mo_menu.black {background-color: #fff;}
    .mo_menu.black li a {color: #333}

    /* 헤더-on */
    #header_mo.on {
        background: rgba(255, 255, 255, 0.05);   backdrop-filter: blur(13px);   -webkit-backdrop-filter: blur(13px);
        box-shadow: 
            0 8px 32px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.5),
            inset 0 -1px 0 rgba(255, 255, 255, 0.1),
            inset 0 0 0px 0px rgba(255, 255, 255, 0);
    }

    #header_mo.on::before {
        content: '';  position: absolute;  top: 0;   left: 0;  right: 0;  height: 1px;
        background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent
        );
    }

    #header_mo.on::after {
        content: '';       position: absolute;    top: 0;   left: 0;    width: 1px;   height: 100%;
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.8),
            transparent,
            rgba(255, 255, 255, 0.3)
        );
    }

    #header_mo.black .logo a {color: #333;}
    #header_mo.black .bar {background-color: #333;}

    #top_btn {bottom: 20px; right: 20px;}

    #telecom {padding: 100px 0 270px 0;}
    #telecom #imgbox img {width: 100%;}
    #telecom #imgbox .pc {display: none;}
    #telecom #imgbox .mo {display: none;}
    #telecom #imgbox .tab {display: block;} 

    #circle .inner {padding: 80px 40px 90px 40px; overflow-x: hidden;}
    
    

    #figure {padding: 100px 0;}
    #figure .stat-box .counter {margin: 0 0 0 100px;}
    #figure .stat-box:nth-of-type(1) .counter {width: 66px;}
    #figure .stat-box:nth-of-type(2) .counter {width: 160px;}
    #figure .bottom .stat-box:nth-of-type(1) .counter {width: 274px;}
    
    #history {padding: 100px 0;}
    #history img {display: none;}

    #struc {padding: 100px 0;}
    #struc img {width: 100%;}

    #location {padding: 100px 0;}
    #location .inner {width: 100%; max-width: inherit; justify-content: space-between}
    #location .inner > .text {width: 40%; margin: 0 0 30px 0;}
    #location .text .top .title {font-size: 2.2rem;}
    #location .map_wrap {width: 60%; height: 380px;}

    #solution .content .box {display: block;}
    #solution .content .box .left {margin: 0 0 20px 0;}
    #solution .content .box .right p {font-size: 1.5rem;}

    .sub_title .left p {font-size: 2.8rem}
    .sub_title .right p {font-size: 1.6rem;}

    #security .box .left {width: 30vw}
    #security .box .right {width: calc(100vw - 24vw);}

    #client .box_wrap {grid-template-columns: 1fr 1fr 1fr;} 
    #client .wrap h3 {font-size: 2rem; margin: 0 0 30px 0}
    
}

@media screen and (max-width:900px){
    .m_title h2 {font-size: 3rem;}
    #main_visual video {height: 75vh;}
    #telecom {padding: 100px 0 180px 0;}
    #telecom .top_text .m_title {margin: 0 0 100px 0;}
    #telecom .text span {font-size: 1.6rem;}
    #telecom .top_text .image {height: 230px;}
    #telecom .top_text {margin: 0 0 120px 0;}

    #circle .text span {font-size: 1.6rem}
    #circle .wrap {display: block;}
    #circle .image {margin: 20px 0 0 0;}

    #challenge {padding: 70px 0}
    #challenge .inner {display: block;}
    #challenge .inner .left {margin: 0 0 20px 0;}

    #figure .stat-box .counter {margin: 0 0 0 20px;}
    #figure .stat-box .label {margin-bottom: 16px;}

    #history .wrap {width: 600px;}
    #history .box .ball {width: 18px; height: 18px;}
    #history .box.right .ball {left: -59px;}
    #history .box.left .ball {right:-61px;}

    #location .map_wrap {width: 50%; height: 260px;}
    #location .text .top {margin:0 0 40px 0;}
    #location .inner > .text {width: 50%;}

    #footer {padding: 80px 0;}

    .sub_head {height: 80vh;}
    .sub_head .text {top: 38%;}
    .sub_head .text p {font-size:2rem;}
    .sub_head .text .load p {font-size: 1.7rem;}

    .sub_title {padding: 80px 0}
    .sub_title .left p {font-size: 2.5rem;}
    .sub_title .right p {font-size: 1.6rem;}
}
@media screen and (max-width:800px){
    #security .box {padding: 70px 0;}
    #media .content .image {border-radius: 20px;}
    #client .box_wrap {grid-template-columns: 1fr 1fr;}  
}
@media screen and (max-width:700px){
    #header_mo .logo a {font-size: 22px;}
    #header_mo .bar {height: 2px;}

    #telecom .top_text .text_1 {margin: 0 0 50px 0;}

    #location .inner {display: block;}
    #location .map_wrap {width: 100%;}
    #location .inner > .text {width: 100%; padding: 20px 0 0 0; display: flex;  flex-direction: column;align-items: center;  text-align: center;}
    #location .text .bottom {gap: 6vw;}

    #history .wrap {width: max-content;}
    #history .box {transform: none !important; width: 100%; padding: 0 0 0 50px;}
    #history .box.left {text-align: left;}
    #history .box.left .ball {right: auto; left: 0;}
    #history .box.right .ball {right: auto; left: 0;}
    #history .line {left: 9px;}

    .sub_head {overflow-x: hidden;}
    .sub_head .text {top: 42%;}
    .sub_head .text p {font-size: 1.7rem;}
    .sub_head .text h3 {font-size: 4.8rem;}

    #solution .content .box .right p {font-size: 1.3rem;} 

    .sub_title .left p {font-size: 2.2rem;}
    .sub_title .right p {font-size: 1.4rem;}

    #footer {padding: 60px 0;}
    #footer .wrap {display: block;}
    #footer .left .top {margin: 0 0 30px 0;}
    #footer .left .top .logo {font-size: 2rem;}
    #footer .left .top p {margin: 10px 0 0 0;}
    #footer .left .sns .wrap {display: flex; gap: 6px;}
    #footer .left .sns .wrap a img {display: block; width: 30px;}
    #footer .right .box .title {margin: 0 0 10px 0;}
    #footer .right .info {margin: 0 0 24px 0;}
    #footer .inqu {margin: 30px 0 0 0; height: 72px; padding: 0 20px;}
    #footer .inqu .logo {font-size: 1.2rem;}
    #footer .inqu .text {display: block;}
    #footer .inqu span {padding: 7px 10px; font-size: 1rem;}
    #footer .left .sns .copyright {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center;}

    .subwrap {margin: -1px 0 580px 0;}

    

}