@media screen and (max-width:600px){
    .inner {padding: 0 20px;}
    #header_mo {padding: 6px 20px;}
    #header_mo .logo a {font-size: 17px;}
    #header_mo .bar {width: 34px; height: 2px;}
    #header_mo .menu ul { transform: translateY(-70px);}
    #header_mo .menu li a {font-size: 4rem;}
    #header_mo .bar { width: 30px; height: 2px; background-color: #fff; position: absolute; right: 0; }
    #header_mo .icon {height: 37px;}
    #header_mo .icon .bar.one { top: 0px; }
    #header_mo .icon .bar.two { top: 7px; }
    #header_mo .icon .bar.three { top: 14px; }
    #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: 0px; } 30% { top: -3px; } 60% { top: 7px; } 80% { transform: rotate(0); } 100% { top: 7px; transform: rotate(45deg); } }
    @keyframes one-reverse { 0% { top: 7px; transform: rotate(45deg); } 30% { transform: rotate(0); } 60% { top: 7px; } 80% { top: -3px; } 100% { top: 0px; } }
    @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: 14px; } 30% { top: 17px; } 60% { top: 7px; } 80% { transform: rotate(0); } 100% { top: 7px; transform: rotate(-45deg); } }
    @keyframes three-reverse { 0% { top: 7px; transform: rotate(-45deg); } 30% { transform: rotate(0); } 60% { top: 7px; } 80% { top: 17px; } 100% { top: 14px; } }

    .mo_menu ul {  transform: translateY(-50px);}
    .mo_menu li a {font-size: 3.3rem;}

    #top_btn {width: 60px; height: 60px; right: 20px; bottom: 20px;}

    #main_visual video {height: 65vh;}
    #main_visual .text h2 {font-size: 2rem;}
    #main_visual .text h3 {font-size: 1.3rem;}
    #main_visual .scroll .bar-wrap {height: 30px; width: 2px;}

    .m_title h2 {font-size: 2.2rem;}
    
    #telecom {padding: 60px 0 120px 0;}
    #telecom .top_text {margin: 0 0 70px 0;}
    #telecom .top_text .m_title {margin: 0 0 50px 0; text-align: right;}
    #telecom .top_text .text_1 {display: block; margin: 0 0 30px 0;}
    #telecom .top_text .image {height: 170px;}
    #telecom .text span {padding: 10px 22px; font-size: 1.3rem;}
    #telecom .text .title {font-size: 1.9rem; margin: 0 0 10px 0;}
    #telecom .text p {font-size: 1.2rem;}

    #telecom #imgbox .tab {display: none;}
    #telecom #imgbox .mo {display: block;}

    #circle .inner {padding: 60px 40px 10px 40px}
    #circle .text span {padding: 10px 22px; font-size: 1.3rem;}
    #circle .text .title {font-size: 1.9rem;}
    #circle .text p {font-size: 1.2rem;}
    #circle .image img {width: 20rem; margin: 30px 0 0 0;}

    #challenge {padding: 60px 0; margin-top: -2px;}
    #challenge .inner .left {font-size: 2.2rem;}
    #challenge .inner .right {font-size: 1.2rem;}
    
    #area {padding: 60px 0;}
    #area .m_title {margin: 0 0 40px 0; text-align: center;}
    #area .wrap {padding: 0;        justify-self: center;}
    #area .box {width: 16rem; height: 16rem;}
    #area .box .title {font-size: 1.3rem;}

    #figure {padding: 60px 0;}
    #figure .m_title {margin: 0 0 30px 0;}
    #figure .stat-box {padding: 24px; flex: 1;}
    #figure .stat-box .counter {font-size: 3.1rem;}
    #figure .stats .top {gap: 14px; justify-content: space-between; margin: 0 0 20px 0;}
    #figure .stat-box .number {justify-content: right;}
    #figure .stat-box:nth-of-type(1) .counter {width: 44px; }
    #figure .stat-box:nth-of-type(2) .counter {width: 110px;}
    #figure .bottom .stat-box:nth-of-type(1) .counter {width: 194px;}
    

    #history {padding: 60px 0; margin-top: -1px;}
    #history .m_title p {margin: 20px 0 60px 0;}
    #history .box .ball {width: 14px; height: 14px;}
    #history .line {left: 7px; height:calc(100% - 89px);}

    #struc {padding: 60px 0;}
    #struc .m_title {margin: 0 0 40px 0;}
    #struc img.pc {display: none;}
    #struc img.mo {display: block;}

    #location {padding: 60px 0;}
    #location .inner {display: flex; flex-direction: column-reverse;}
    #location .inner > .text {padding: 0 0 20px 0;}
    #location .map_wrap {height: 200px;}


    .sub_head {height:70vh;}
    .sub_head .text {top: 32%; left: 30px;}
    .sub_head .text h3 {font-size: 3.2rem; margin: 0 0 20px 0;}
    .sub_head .text p {margin: 0 0 30px 0; font-size: 1.5rem;}
    .sub_head .text .load img:nth-of-type(1) {width: 13px;}
    .sub_head .text .load img:nth-of-type(2) {width: 5px; margin: 0 14px;}

    .sub_title {display: block; padding: 60px 0;}
    .sub_title .left p {font-size: 2rem;}
    .sub_title .right {margin: 30px 0 0 0;}
    .sub_title .right p {font-size: 1.3rem;}

    #solution .content .box {padding: 50px 0;}
    #solution .content .box .left {margin: 0 0 10px 0;}
    #solution .content .box .left .image img {width: 47px;}
    #solution .content .box .go {top: 46px; width: 30px; height: 30px; right: 0;}
    #solution .content .box .right .bold {margin: 0 0 20px 0;}

    #security .box {display: block; padding: 50px 10px;}
    #security .box .left {width: 100%; margin: 0 0 20px 0;}
    #security .box .right {max-width: 100%; width: 100%;}

    #media .content {grid-template-columns: 1fr;    gap: 40px 3vw;}

    #client .box_wrap {gap: 10px;}
    #client .box_wrap .box .text p {font-size: 1rem;}

    #footer .inqu p {display: none;}
}