/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (min-width:279px) and (max-width:480px) {

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    .swiper-slide {
        -ms-overflow-style: none;
        /* 인터넷 익스플로러 */
        scrollbar-width: none;
        /* 파이어폭스 */
    }

    html,
    body,
    #root {
        width: 100%;
        /* min-height: 100vh; */
        font-size: 7px;
        color: var(--color-black);
        font-family: 'Pretendard';
    }

    body {
        min-width: 100%;


    }

    .logo {
        width: 50% !important;
        height: 14px !important;
        background-size: cover;
    }

    .mobil-wrap {
        width: 50%;
    }

    .mobil-wrap button {
        width: 100%;
        text-align: right;
        margin-left: 0px !important;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    .header-area {
        width: 100%;
    }

    .mobile-menu-button,
    .mobil-wrap {
        display: block;
    }

    .web-menu {
        display: none;
    }

    .mobil-btn {
        display: block;
    }

    .mobil-menu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 36px;
        left: 0;
        z-index: 100000;
    }

    .mobil-menu ul {
        list-style: none;
        padding: 2rem 0;
        margin: 0;
        background-color: #fff;
    }

    nav ul li a {
        font-size: 2.5rem !important;
    }

    .clicked {
        margin: 0 auto;
        width: 100px;
    }

    .mobil-menu ul li ul li a {

        font-weight: 300;
        color: #333;
        font-size: 2.4rem !important;
    }

    nav>ul {
        background-color: #fff;
        border-bottom: 1px solid #333;
    }

    nav ul li {
        color: #333 !important;
        width: 100% !important;
    }



    .mobile-menu-button,
    .mobile-menu-button-close {
        font-size: 2.5rem;
        color: #333;
        height: 29px;
        width: 29px;
    }

    .swiper {
        width: 50%;
        height: 100%;
        padding: 2rem;
    }

    .swiper-slide {
        width: 100%;

    }

    .slide-wrap {
        width: 100%;
    }

    #header.active {
        border-bottom: 1px solid #ced4da;
        background-color: white;
    }

    #header.active .header nav li a {
        color: #333;

    }

    #header.active .header nav ul li ul.dropdown {
        background-color: #fff;
    }

    #header.active .header .logo {
        background: url(../img/component/logo-color.png) no-repeat;
        width: 200px;
        background-size: contain;
        height: 25px;

    }

    #header.active .header .mobile-menu-button,
    .mobile-menu-button-close {
        color: #333;
    }

    #header.active .header .mobile-menu-button-close {
        color: #333;
        display: block;
    }

    #header.active .header .mobil-menu ul {
        background-color: #fff;
    }

    #header {
        position: fixed !important;
        top: 0;
    }

    .solution-text,
    .portfolio-text,
    .map-text,
    .about-title p:nth-child(1) {
        font-size: 4.5rem !important;
        padding-bottom: 1rem;
    }

    .text-main {
        font-size: 4.2rem !important;
        margin-bottom: 2rem;
    }

    .solution-title p,
    .traffic-title p,
    .ai-title p,
    .meta-title p,
    .smart-title p {
        font-size: 3.8rem;
        margin: 1rem;
        word-break: keep-all;
    }

    .sub-text,
    .solution-sub-text {
        font-size: 2.3rem !important;
        margin-bottom: 0rem;
    }
    .marketing-area p span{
        font-size: 2rem;
    }
    .marketing-area p{
        font-size: 2rem;
    }
    .marketing-wrap-title h1 {
        font-size: 4rem;
    }

    .accordion.active .accordion-num,
    .accordion.active .accordion-num span {
        font-size: 4rem;
        margin-bottom: 0rem !important;
        text-align: center;
        margin-bottom: 10px;
    }

    .history-box {
        -ms-overflow-style: none;
        /* 인터넷 익스플로러 */
        scrollbar-width: none;
        height: 80% !important;
        margin: 20px 10px;
    }

    .history-area {
        gap: 0px !important;
    }

    .slideTextDtail p {
        display: none;
    }

    .solution-box {
        width: 100%;
        height: calc(100% - 182px) !important;
        flex-direction: column;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: space-between;
    }

    .slide-solution .text-area {
        padding: 12rem 2rem 6rem  2rem;
    }


    #contentHeadquarter,
    #contentDaeguBranch {
        height: 300px !important;
    }

    #map1,
    #map2 {
        width: 100% !important;
    }

    .box:hover {
        transform: scale(1);
    }

    .box-wrap-title {
        font-size: 1.5rem !important;
        font-weight: 800;
        margin-bottom: 0px;
    }

    .box p:nth-child(1) {
        font-size: 2.5rem;
        font-weight: 600;
    }

    .box p {
        font-weight: 300;
        font-size: 2rem;
    }


    #solution {

        padding: 0rem !important;
    }

    #solution .swiper-wrapper {
        background: linear-gradient(#f8f9fa, #fff, #fff) !important;

    }

    #solution .swiper-slide {
        height: 100% !important;
        background: #fff !important;
    }

    #solution .taken-area {
        width: 100% !important;
    }

    #solution .text-area {
        width: 100% !important;
        height: 100%;
        padding: 12rem 2rem 6rem 2rem!important;
    }

    .text-area {
        width: 100% !important;
        height: 100% !important;
        padding: 6rem 2rem;
    }

    .year span {
        display: none;
    }

    .innerSwiper-title {
        font-size: 2.7rem;
    }

    .innerSwiper-text {
        font-size: 2.3rem;
    }

    .innerSwiper .swiper-slide {
        width: 100% !important;
        padding: 10px;
    }

    .sub-text-area {
        margin-bottom: 1rem !important;
    }

    .marketing-wrapper {
        width: 100%;
        padding: 1rem 2rem 2rem 2rem;
        margin: 0 auto;
    }

    .portfolio-text {
        margin-bottom: 1rem;
    }

    .marketing-wrap-title h1::after {
        width: 20px;
        height: 20px;
        background-size: 20px;
        transform: translateX(-50%);
    }

    .marketing-area {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .marketing-title {
        font-size: 2.8rem !important;
    }

    .gradient-bottom {
        padding-top: 60px !important;
    }

    .slide-solution {
        height: 100%;
    }

    .root_daum_roughmap_landing {
        width: 100% !important;
        height: 50% !important;
    }

    .root_daum_roughmap .wrap_map {
        height: 200px !important;
    }

    .secen-map {
        width: 100% !important;
        height: 50% !important;
    }

    .secen-map div {
        height: 100% !important;
    }

    .secen-map .map {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;

    }



    .address-tile {
        width: 100%;
        text-align: center;
        font-size: 2.4rem;
        padding-left: 0px;
    }

    .address-subtitle {
        font-size: 1.8rem !important;
    }

    .address-tile::after {
        display: none;
    }

    .map-btn {
        justify-content: center;
    }

    .map-btn button {
        /* width: 40%; */
        font-size: 2.2rem;
        font-weight: 500;
    }

    .address-box {
        width: 100%;
    }

    footer {
        width: 100%;
        padding: 20px !important;
    }

    .footer-wrap {
        width: 100%;
    }

    .footer-text div {
        flex-wrap: wrap;
    }

    .footer-text div p,
    .footer-text p {
        width: 100% !important;
        font-size: 2rem !important;
        padding-left: 0px !important;
    }

    .copyright {
        font-size: 2rem !important;
    }

    .about-wrap {
        width: 100%;
        padding: 9rem 2rem;
    }

    footer img {
        width: 50% !important;
        height: 50%;
    }

    .container {
        width: 100%;
        height: 70% !important;
    }

    .about-title-sub {
        font-size: 2.5rem;
        margin-bottom: 0px;
    }

    .about-area {
        flex-wrap: nowrap;
        width: 100%;
        height: 10%;
        margin-bottom: 10px !important;
        flex-direction: column;
        gap: 10px !important;
    }

    .about-area p {
        font-size: 2.2rem;
    }
    .month{
        font-size: 2.5rem;
    }
    .month-text p {
        font-size: 2.2rem;
        margin-bottom: 0rem;
    }

    .about-radius,
    .about-radius-bottom,
    .about-radius-right,
    .about-radius-left,
    .about-radius-bottom-left,
    .about-radius-bottom-right {
        width: 100%;
        height: 100%;
        padding: 0.5rem;
        border-radius: 5px !important;
    }

    .about-radius-left::after,
    .about-radius-bottom-right::after,
    .about-radius-bottom-left::after,
    .about-radius::after,
    .about-radius-right::after {
        display: none;
    }


    .about-text {
        font-size: 1.5rem;
    }

    .silde-box {
        height: 75%;
        display: flex;
        flex-direction: column;
    }

    .silde-box .accordion {
        height: 10px;
        padding: 1.5rem;
    }

    .silde-box .slideImg {
        display: none;
    }

    .accordion2,
    .accordion1,
    .accordion3 {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;

        background-position: center;
    }

    .accordion2::after,
    .accordion1::after,
    .accordion3::after {
        font-size: 3.4rem;
        top: 8px;
        left: 15px;
    }

    .accordion2::before,
    .accordion1::before,
    .accordion3::before {
        font-size: 3.4rem;
        top: 8px;
        left: 60px;
    }

    .about .about-title p {
        margin-bottom: 0rem !important;
    }



    .slideText p:last-child,
    .slideTextDtail p {
        font-size: 3rem;
        text-align: center;
    }

    .slideText p:first-child {
        font-size: 4rem;
    }

    .month-text p::after {
        left: -6%;
    }

    .month-text p {
        margin-left: 15px;
        margin-bottom: 10px;
    }

    .slideTextDtail p:nth-child(1) {
        display: block !important;
        font-size: 2.3rem;
        border-bottom: 0px !important;
        margin-bottom: 0rem !important;
    }

    .slideTextDtail-box p {
        padding-left: 0px;
    }

    .section .flex {
        width: 100%;
    }

    .month-text {
        width: 100%;
    }

    .slideTextDtail {
        padding: 0 1rem;
    }

    .slideTextDtail div div {
        display: none;
    }

    .about-title {
        margin-top: 60px;
        margin-bottom: 1rem !important;
    }

    .solution-web-box img {
        width: 100%;
        object-fit: contain !important;
        height: 200px !important;
    }


    .month-text img {
        width: 100px !important;
        height: 150px;
        margin: 1rem;
    }

    .text-section {
        width: 100%;
    }

    .about-vision-box img {
        width: 100%;
        height: 150px;
        display: block;
        object-fit: contain;
    }

    .timeline {
        width: 100%;
    }

    .years {
        display: flex;
        width: 100%;
        border-bottom: 1px solid #333;
    }

    .active-year {
        font-size: 3rem;
    }

    .contents {
        text-align: center;

    }

    .month {
        width: 100%;
        text-align: left !important;
        margin-bottom: 5px;
    }

    .month-text div {
        width: 100%;
    }

    .taken-wrap-box {
        width: 100% !important;
        gap: 10px !important;
        flex-direction: column;
    }

    .taken-area {
        width: 100%;
        height: 0% !important;
        align-items: start;
        gap: 10px !important;
    }

    .solution-area {
        gap: 10px !important;
    }

    .about .content .flex {
        margin-bottom: 0rem !important;
    }

    .taken-area img,
    .traffic-area img,
    .ai-area img {
        width: 100%;
        object-fit: contain !important;
    }


    .taken-box {
        width: 100%;
        /* margin-bottom: 2rem; */
        flex-direction: column;
        gap: 5px;
    }



    .taken-box p {
        margin-top: 0px;
        font-size: 2.2rem;
    }



    .text-box-title {
        font-weight: 600;
        margin-top: 1rem;
        text-align: center;
        font-size: 2.9rem;
        margin-left: 0rem;
    }

    .solution-after {
        justify-content: start;
    }


    .solution-title::after,
    .traffic-title::after,
    .ai-title::after,
    .meta-title::after,
    .smart-title::after {
        display: none;
    }

    #Data,
    #smart,
    #visuali,
    #dataanalysis {
        height: 100% !important;
        overflow-y: scroll !important;
        padding-top: 120px;
    }

    #customized,
    #etc {
        height: 100% !important;
        overflow-y: scroll !important;
        padding-top: 120px;
    }



    .meta-wrap::before {
        width: 100%;
        display: none;
    }

    #visuali .etc-wrap-text,
    #dataanalysis .etc-wrap-text,
    #customized .box-wrap {
        width: 100%;
    }

    #Data img,
    #visuali img,
    #dataanalysis img,
    #customized img {
        width: 100%;
    }

    #smart img {
        width: 100%;
    }

    #customized .box-wrap p {
        font-size: 2.6rem;
        margin: 2rem 0;
    }

    #smart .box-wrap-title {
        font-size: 2.6rem !important;
        font-weight: 600 !important;
        word-break: keep-all;

    }

    #etc .etc-box-title {
        font-weight: 600 !important;
        width: 100%;
    }

    #smart .etc-wrap-text div p,
    #etc .etc-box p {
        font-size: 2.2rem;
        padding: 0px;
        text-align: center;
        font-weight: 400;
        word-break: keep-all;
    }
    #map .text-area{
        padding: 1rem 2rem 6rem 2rem;    }

    .solution-area {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .solution-text-box {
        padding: 10px 15px 20px 15px !important;
    }

    .solution-text-box p {
        padding-left: 12px;
    }

    .solution-text-box div {
        gap: 0px !important;
        flex-direction: column;
        margin-left: 0px !important;
    }

    .solution-text-box div div p {
        width: 100%;
        margin-left: 3px;
        padding-left: 1.2rem;
    }

    .etc-wrap-text,
    .box-wrap {
        width: 100%;
        flex-direction: column;
    }

    .box-wrap {
        gap: 5px;
    }

    .etc-wrap-text div,
    .box-wrap div {
        width: 100%;
        border-radius: 5px;
        margin-bottom: 5px;
        flex-wrap: wrap !important;
    }

    #Data .box-wrap p {
        font-size: 2.6rem;
        font-weight: 600 !important;
        margin: 2rem 0;
    }


    .traffic-video {
        width: 90%;
        padding: 1rem 1rem 2rem 1rem;
    }

    .traffic-video p {
        font-size: 2.6rem;
        word-break: keep-all;
    }

    .traffic-button button {
        padding: 7px 46px;
        font-size: 2.2rem;
    }

    .taken-area p {
        font-size: 2.4rem;
    }
    .text-after p::after{
        top: 0;
    }

    .traffic-button {
        justify-content: center;
    }

    .etc-wrap-text p,
    .box-wrap p {
        font-size: 2.6rem;
        margin-bottom: 2rem;
        font-weight: 500;
    }

    .analysis-text p {
        height: 100%;
        padding: 0px;
        margin-top: 2rem;
    }

    .solution .swiper-slide img {
        width: 100%;
        height: 100px !important;

    }

    .text-box-title::after {
        display: none;
    }


    .traffic-video {
        top: 25%;
    }

    .viedeo-text-box {
        width: 100%;
        margin: 1rem 0;
        flex-wrap: nowrap;

        /* border: 1px solid red; */
    }

    .viedeo-text-box p:nth-child(1) {
        text-align: left;
    }

 #etc .etc-box-title{
    margin: 2rem 0;
 }
    .visual-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }


    .customized-wrap-title {
        margin-top: 50px;
        margin-bottom: 1rem;
    }

    .etc-wrap-title h1 {
        padding-top: 0rem;
    }


    .etc-box p {
        text-align: left;
    }

    .box-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    .etc-box {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .box-wrap img {
        width: 100%;
        padding-bottom: 0rem !important;
        object-fit: contain;
    }

    .solution-title,
    .traffic-title,
    .ai-title,
    .meta-title,
    .smart-title {
        margin-bottom: 10px !important;
    }

    .year {
        font-size: 3rem;
    }

    .box-wrap div p {
        text-align: center;
        margin: 0 auto;
        word-break: keep-all;

    }

    .etc-text-deco p::after {
        display: none;
    }

    .solution-deco p {
        margin-left: 0.4rem;
        word-break: keep-all;
    }

    .traffic-img-box {
        width: 100% !important;
    }

    .traffic-img-box img {
        width: 100% !important;
        object-fit: cover !important;
    }

    .etc-box-title {
        font-weight: 700;
        text-align: center !important;
        font-size: 3rem !important;
    }

    .solution-deco p::after {
        left: 0%;
    }

    .box-wrap div div {
        height: 37% !important;
    }

    .etc-wrap-title h1,
    .customized-wrap-title h1 {
        font-size: 3.3rem !important;
        word-break: keep-all;
    }

    .etc-wrap-title p,
    .customized-wrap-title p {
        font-size: 2.5rem !important;
        margin-bottom: 2rem;
    }

    .etc-wrap-title {
        /* height: 100%; */
        padding-bottom: 10px !important;
        margin-bottom: 0px !important;
        padding-top: 0rem !important;
    }


    .customized-box {
        width: 100%;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .customized-box div {
        width: 100%;

        margin-bottom: 10px;
    }

    .customized-box p {
        font-size: 2.1rem !important;
    }

    .customized-box div img {
        width: 79%;
    }

    .Portfolio {
        width: 100%;
        height: 100%;
    }

    .innerSwiper {
        height: 100%;
    }

    .innerSwiper .swiper-slide {
        height: 40%;
    }

    .etc-box-title {
        margin-bottom: 0px;
    }

    .etc-box-title p {
        padding-left: 0px;
    }

    .etc-box p {
        padding-left: 0px;
    }

    .solution-box {
        width: 100%;
        height: calc(100% - 182px) !important;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        text-shadow: 2px 2px 5px #33333354;
        gap: 10px;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6 {
        width: 100%;
        font-size: 1.5rem;
        background-size: cover;
        border-radius: 10px;
        background-position: center;
        padding: 10px !important;
    }

    .box2,
    .box4 {
        transform: translateY(0px);
    }

}

@media all and (min-width:480px) and (max-width:768px) {



    body {
        min-width: 100%;


    }

    .logo {
        width: 50% !important;
        height: 14px !important;
        background-size: cover;
    }

    .mobil-wrap {
        width: 50%;
    }

    .mobil-wrap button {
        width: 100%;
        text-align: right;
    }

    .traffic-img-box {
        width: 100% !important;
    }

    .traffic-img-box img {
        width: 100% !important;
        object-fit: cover !important;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    .header-area {
        width: 100%;
    }

    .mobile-menu-button,
    .mobil-wrap {
        display: block;
    }

    .web-menu {
        display: none;
    }

    .mobil-btn {
        display: block;
    }

    .mobil-menu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 36px;
        left: 0;
        z-index: 100000;
    }

    .mobil-menu ul {
        list-style: none;
        padding: 2rem 0;
        margin: 0;
        background-color: #fff;
    }

    nav ul li a {
        font-size: 2rem !important;
    }

    .mobil-menu ul li ul li a {

        font-weight: 300;
        color: #333;
        font-size: 1.5rem !important;
    }

    .clicked {
        margin: 0 auto;
        width: 100px;
    }

    nav>ul {
        background-color: #fff;
        border-bottom: 1px solid #333;
    }

    nav ul li {
        color: #333 !important;
        width: 100% !important;
    }

    .mobile-menu-button {
        transform: translateX(10px);
    }

    .mobile-menu-button,
    .mobile-menu-button-close {
        font-size: 2rem;
        color: #333;
        height: 29px;
        width: 29px;
    }

    .swiper {
        width: 50%;
        height: 100%;
        padding: 2rem;
    }

    .swiper-slide {
        width: 100%;

    }

    .slide-wrap {
        width: 100%;
    }

    #header.active {
        border-bottom: 1px solid #ced4da;
        background-color: white;
    }

    #header.active .header nav li a {
        color: #333;

    }

    #header.active .header nav ul li ul.dropdown {
        background-color: #fff;
    }

    #header.active .header .logo {
        background: url(../img/component/logo-color.png) no-repeat;
        width: 200px;
        background-size: contain;
        height: 25px;

    }

    #header.active .header .mobile-menu-button,
    .mobile-menu-button-close {
        color: #333;
    }

    #header.active .header .mobile-menu-button-close {
        color: #333;
        display: block;
    }

    #header.active .header .mobil-menu ul {
        background-color: #fff;
    }

    .traffic-img-box img {
        width: 100% !important;
        object-fit: cover !important;
    }

    .solution-text,
    .portfolio-text,
    .map-text,
    .about-title p:nth-child(1) {
        font-size: 3rem !important;
        padding-bottom: 1rem;
    }

    .text-main {
        font-size: 2.4rem !important;
        margin-bottom: 2rem;
    }

    .solution-title p,
    .traffic-title p,
    .ai-title p,
    .meta-title p,
    .smart-title p {
        font-size: 2.5rem;
        margin: 1rem;
        word-break: keep-all;
    }

    .sub-text,
    .solution-sub-text {
        font-size: 1.8rem !important;
        margin-bottom: 0rem;
        word-break: keep-all;
    }

    .accordion-sub-text {
        font-size: 2.6rem !important;
    }

    .marketing-wrap-title h1 {
        font-size: 3rem;
    }

    .accordion.active .accordion-num,
    .accordion.active .accordion-num span {
        font-size: 3.5rem;
    }

    .history-box {
        -ms-overflow-style: none;
        /* 인터넷 익스플로러 */
        scrollbar-width: none;
        height: 80% !important;
    }

    .slideTextDtail p {
        border-bottom: 0px !important;
    }

    .business-box {
        display: none;
    }

    .solution-box {
        width: 100%;
        height: calc(100% - 182px) !important;
        flex-direction: column;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: space-between;
    }

    .slide-solution .text-area {
        padding: 6rem 2rem;
    }


    #contentHeadquarter,
    #contentDaeguBranch {
        height: 300px !important;
    }

    #map1,
    #map2 {
        width: 100% !important;
    }

    .box:hover {
        transform: scale(1);
    }

    .box-wrap-title {
        font-size: 1.3rem !important;
        font-weight: 800;
        margin-bottom: 0px;
    }

    .box p:nth-child(1) {
        font-size: 1.8rem;
        font-weight: 600;
    }

    .box p {
        font-weight: 300;
        font-size: 1.5rem;
    }


    #solution {

        padding: 0rem !important;
    }

    #solution .swiper-wrapper {
        background: linear-gradient(#f8f9fa, #fff, #fff) !important;

    }

    #solution .swiper-slide {
        height: 100% !important;
        background: #fff !important;
    }

    #solution .taken-area {
        width: 100% !important;
    }

    #solution .text-area {
        width: 100% !important;
        height: 100%;
        padding: 6rem 2rem !important;
    }

    .text-area {
        width: 100% !important;
        height: 100% !important;
        padding: 6rem 2rem;
    }

    .innerSwiper-title {
        font-size: 1.9rem;
    }

    .innerSwiper-text {
        word-break: keep-all;
        font-size: 1.5rem;
    }

    .innerSwiper .swiper-slide {
        width: 100% !important;
        padding: 10px;
    }

    .sub-text-area {
        margin-bottom: 1rem !important;
    }

    .marketing-wrapper {
        width: 100%;
        padding: 1rem 1rem 2rem 1rem;
        margin: 0 auto;
    }

    .portfolio-text {
        padding-left: 2rem;
    }

    .marketing-wrap-title h1::after {
        width: 20px;
        height: 20px;
        background-size: 20px;
        transform: translateX(-50%);
    }

    .marketing-area {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .month {
        width: 100%;
    }

    .marketing-title {
        font-size: 1.8rem;
    }

    .gradient-bottom {
        padding-top: 60px !important;
    }

    .slide-solution {
        height: 100%;
    }

    .root_daum_roughmap_landing {
        width: 100% !important;
        height: 50% !important;
    }

    .root_daum_roughmap .wrap_map {
        height: 200px !important;
    }

    .secen-map {
        width: 100% !important;
        height: 50% !important;
    }

    .secen-map div {
        height: 100% !important;
    }

    .secen-map .map {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;

    }



    .address-tile {
        width: 100%;
        text-align: center;
        font-size: 1.5rem;
        padding-left: 0px;
    }

    .address-subtitle {
        font-size: 1.4rem !important;
    }

    .address-tile::after {
        display: none;
    }

    .map-btn {
        justify-content: center;
    }

    .map-btn button {
        /* width: 40%; */
        font-size: 1.5rem;
        font-weight: 500;
    }

    .address-box {
        width: 100%;
    }

    footer {
        width: 100%;
        padding: 20px !important;
    }

    .footer-wrap {
        width: 100%;
    }

    .footer-text div {
        flex-wrap: wrap;
    }

    .footer-text div p,
    .footer-text p {
        width: 100% !important;
        font-size: 1.3rem !important;
        padding-left: 0px !important;
    }

    .copyright {
        font-size: 1.3rem !important;
    }

    .about-wrap {
        width: 100%;
        padding: 9rem 2rem;
    }

    .etc-box {
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    /* footer img {
        width: 100px !important;
    } */

    .container {
        width: 100%;
    }

    .about-title-sub {
        font-size: 1.8rem;
        margin-bottom: 0px;
    }

    .about-area {
        flex-wrap: nowrap;
        width: 100%;
        height: 10%;
        margin-bottom: 10px !important;
        flex-direction: column;
        gap: 10px !important;
    }

    .about-area p {
        font-size: 2rem;
    }

    .month-text p {
        font-size: 1.6rem;
    }

    .about-radius,
    .about-radius-bottom,
    .about-radius-right,
    .about-radius-left,
    .about-radius-bottom-left,
    .about-radius-bottom-right {
        width: 100%;
        height: 100%;
        padding: 0.5rem;
        border-radius: 5px !important;
    }

    .about-radius-left::after,
    .about-radius-bottom-right::after,
    .about-radius-bottom-left::after,
    .about-radius::after,
    .about-radius-right::after {
        display: none;
    }


    .about-text {
        font-size: 1.5rem;
    }

    .silde-box {
        height: 75%;
        display: flex;
        flex-direction: column;
    }

    .silde-box .accordion {
        height: 10px;
        padding: 0.5rem;
    }

    .silde-box .slideImg {
        display: none;
    }

    .slideText {
        padding: 10px;
    }


    .slideTextDtail p {
        font-size: 1.5rem;
    }

    .slideText p:first-child {
        font-size: 2rem;
    }


    .slideTextDtail {
        padding: 0 1rem;
    }

    .address-subtitle {
        font-size: 1.4rem !important;
        margin: 0 auto;
    }

    .about-title {
        margin-top: 60px;
        margin-bottom: 1rem !important;
    }

    .solution-web-box img {
        width: 100%;

        object-fit: contain !important;
        height: 200px !important;
        margin-bottom: 20px !important;
    }

    .history-area {
        gap: 0px !important;
    }

    .month-text img {
        width: 100px !important;
        height: 215px;
    }


    .about-vision-box img {
        display: block;
        object-fit: contain;
    }

    .timeline {
        width: 100%;
    }

    .years {
        display: flex;
        width: 100%;
        border-bottom: 1px solid #333;
    }

    .year {
        justify-content: center;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .active-year {
        font-weight: 900;
        font-size: 4rem;
    }

    .contents {
        text-align: center;

    }

    .month {
        text-align: left !important;
    }

    .month-text div {
        width: 100%;
        flex-wrap: nowrap;
    }

    .taken-wrap-box {
        width: 100% !important;
        gap: 40px !important;
        flex-direction: column;
    }

    .taken-area {
        width: 100%;
        height: 0% !important;
        align-items: start;
        gap: 10px !important;
    }

    .solution-area {
        gap: 10px !important;
    }

    .taken-area img,
    .traffic-area img,
    .ai-area img {
        width: 100%;
        object-fit: contain !important;
        margin-bottom: 2rem;
    }


    .taken-box {
        width: 100%;
        /* margin-bottom: 2rem; */
        flex-direction: column;
        gap: 5px;
    }



    .taken-box p {
        margin-top: 0px;
        font-size: 1.2rem;
    }



    .text-box-title {
        font-weight: 600;
        margin-top: 1rem;
        text-align: center;
        font-size: 1.6rem;
        margin-left: 0rem;
    }

    .solution-after {
        justify-content: start;
    }


    .solution-title::after,
    .traffic-title::after,
    .ai-title::after,
    .meta-title::after,
    .smart-title::after {
        display: none;
    }

    #Data,
    #smart,
    #visuali,
    #dataanalysis {
        height: 100% !important;
        overflow-y: scroll !important;
    }

    #customized,
    #etc {
        height: 100% !important;
        overflow-y: scroll !important;
        padding-top: 60px;
    }



    .meta-wrap::before {
        width: 100%;
        display: none;
    }

    #visuali .etc-wrap-text,
    #dataanalysis .etc-wrap-text,
    #customized .box-wrap {
        width: 100%;
    }

    #Data img,
    #visuali img,
    #dataanalysis img,
    #customized img {
        width: 100%;
    }

    #smart img {
        width: 100%;
    }

    #smart .box-wrap-title {
        font-size: 2rem !important;
        display: block !important;
        font-weight: 600 !important;
    }

    #etc .etc-box-title {
        display: block !important;
        font-weight: 600 !important;
        width: 100%;
    }

    #etc .etc-box p {
        font-size: 1.6rem !important;
        padding: 0px;
        font-weight: 200;
    }

    .solution-area {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .solution-text-box {
        padding: 10px 15px 20px 15px !important;
    }

    .solution-text-box p {
        padding-left: 5px;
    }

    .solution-text-box div {
        gap: 0px !important;
        flex-direction: column;
    }

    .solution-text-box div div p {
        width: 100%;
    }

    .etc-wrap-text,
    .box-wrap {
        width: 100%;
        flex-direction: column;
    }

    .box-wrap {
        gap: 5px;
    }

    .etc-wrap-text div,
    .box-wrap div {
        width: 100%;
        border-radius: 5px;
        margin-bottom: 5px;
    }

    .etc-wrap-text div {
        flex-wrap: wrap !important;
    }


    .traffic-video {
        width: 90%;
        padding: 1rem 1rem 2rem 1rem;
    }

    .traffic-video p {
        font-size: 1.6rem;
        word-break: keep-all;
    }

    .traffic-button button {
        padding: 7px 46px;
        font-size: 1.5rem;
    }

    .taken-area p {
        font-size: 1.4rem;
    }

    .traffic-button {
        justify-content: center;
    }

    .etc-wrap-text p,
    .box-wrap p {
        font-size: 1.6rem !important;
        margin-bottom: 2rem;
    }

    .etc-text-deco p::after{
        display: none;
    }
    .solution .swiper-slide img {
        width: 100%;
        height: 100px !important;

    }

    .text-box-title::after {
        display: none;
    }


    .traffic-video {
        top: 25%;
    }

    .viedeo-text-box {
        width: 100%;
        margin: 1rem 0;
        flex-wrap: nowrap;

        /* border: 1px solid red; */
    }

    .viedeo-text-box p:nth-child(1) {
        text-align: left;
    }


    .box:hover,
    .box-wrap div img:hover {
        transform: scale(1);
    }

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


    .customized-wrap-title {
        margin-top: 50px;
        margin-bottom: 1rem;
    }

    .etc-wrap-title h1 {
        padding-top: 0rem;
    }

    .etc-box-title {
        font-weight: 900;
        text-align: center !important;
        font-size: 2.2rem !important;
    }

    .etc-box p {
        text-align: left;
    }

    .box-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }


    .box-wrap img {
        width: 100%;
        padding-bottom: 0rem !important;
        object-fit: contain;
    }

    .solution-title,
    .traffic-title,
    .ai-title,
    .meta-title,
    .smart-title {
        margin-bottom: 40px !important;
    }

    .box-wrap div p {
        text-align: center;
        margin: 0 auto;
        padding: 10px 0;
        margin-bottom: 0rem !important;
        font-size: 2rem !important;
    }

    .etc-box-title {
        font-weight: 700;
        text-align: center !important;
        font-size: 2.2rem !important;
    }

    .box-wrap div div {
        display: none;
        height: 37% !important;
    }

    .etc-wrap-title h1,
    .customized-wrap-title h1 {
        padding: 3rem 0 0 0;
        font-size: 2.8rem !important;
        word-break: keep-all;
    }

    .etc-wrap-title p,
    .customized-wrap-title p {
        font-size: 2rem !important;
        margin-bottom: 2rem;
    }

    .etc-wrap-title {
        /* height: 100%; */
        padding-bottom: 10px !important;
        margin-bottom: 0px !important;
    }

    .customized-box {
        width: 100%;
        display: grid;
        gap: 10px;
        grid-template-columns: 1fr 1fr;
    }

    .customized-box div {
        width: 100%;

        margin-bottom: 10px;
    }

    .customized-box p {
        font-size: 1.1rem !important;
    }

    .customized-box div img {
        width: 79%;
    }

    .Portfolio {
        width: 100%;
        height: 100%;
    }

    .innerSwiper {
        height: 100%;
    }

    .innerSwiper .swiper-slide {
        height: 40%;
    }

    .etc-box-title {
        margin-bottom: 0px;
    }

    .etc-box-title p {
        padding-left: 0px;
    }

    .etc-box p {
        padding-left: 0px;
    }

    .solution-box {
        width: 100%;
        height: calc(100% - 182px) !important;
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        text-shadow: 2px 2px 5px #33333354;
        gap: 5px;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6 {
        width: 100%;
        font-size: 1.5rem;
        background-size: cover;
        background-position: center;
        padding: 15px !important;
    }

    .box2,
    .box4 {
        transform: translateY(0px);
    }

    .innerSwiper .swiper-slide img {
        height: 100%;
    }
    .accordion2,
    .accordion1,
    .accordion3 {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;

        background-position: center;
    }

    .accordion2::after,
    .accordion1::after,
    .accordion3::after {
        font-size: 3.4rem;
        top: 8px;
        left: 15px;
    }

    .accordion2::before,
    .accordion1::before,
    .accordion3::before {
        font-size: 3.4rem;
        top: 8px;
        left: 60px;
    }



}

@media all and (min-width:768px) and (max-width:1366px) {
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }

    html,
    body,
    #root {
        width: 100%;
        /* min-height: 100vh; */
        font-size: 0.7rem;
        color: var(--color-black);
        font-family: 'Pretendard';
    }

    body {
        min-width: 100%;


    }



    .solution-title p,
    .traffic-title p,
    .ai-title p,
    .meta-title p,
    .smart-title p,
    .etc-wrap-title p {
        font-size: 2.5rem;
    }

    .sub-text,
    .solution-sub-text {
        font-size: 2rem !important;
    }

    .clicked {
        margin: 0 auto;
        width: 100px;
    }

    .slide-solution .text-area {
        padding: 6rem 2rem;
    }

    .slide-solution .portfolio-text {
        padding: 0rem 1rem;
    }

    #contentHeadquarter {
        width: 100%;
        height: 350px;
    }

    #map1,
    #map2 {
        width: 100% !important;
    }

    .box:hover {
        transform: scale(1);
    }

    .box-wrap-title {
        font-size: 1.3rem !important;
        font-weight: 600;
        margin-bottom: 0px;
    }


    .etc-wrap-text p {
        text-align: center;
        font-size: 1.7rem;
    }

    .header-area {
        width: 100%;
    }

    .mobile-menu-button,
    .mobil-wrap {
        display: block;
    }
    .etc-text-deco p::after{
        display: none;
    }
    .web-menu {
        display: none;
    }

    .mobil-btn {
        display: block;
    }

    .mobil-menu {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 36px;
        left: 0;
        z-index: 100000;
    }

    .mobil-menu ul {
        list-style: none;
        padding: 2rem 0;
        margin: 0;
        background-color: #fff;
    }

    .mobil-menu ul li ul li a {
        font-weight: 500;
        color: #333;
        font-size: 1.2rem !important;
    }

    nav>ul {
        background-color: #fff;
        border-bottom: 1px solid #333;
    }

    nav ul li {
        color: #333 !important;
        width: 100% !important;
    }

    .mobile-menu-button {
        transform: translateX(10px);
    }

    .mobile-menu-button,
    .mobile-menu-button-close {
        font-size: 2rem;
        color: #333;
        height: 29px;
        width: 29px;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    .swiper {
        width: 50%;
        height: 100%;
    }

    .swiper-slide {
        width: 100%;

    }

    .text-main,
    .solution-text {
        font-size: 4rem !important;
    }

    #map1,
    #map2 {
        width: 740px !important;
    }

    #contentHeadquarter,
    #contentDaeguBranch {
        height: 300px !important;
    }

    .address-subtitle {
        font-size: 1.4rem !important;
    }

    .slide-wrap {
        width: 100%;
        height: 100% !important;
    }

    .text-area {
        width: 100% !important;
        padding: 6rem 2rem;
    }

    .innerSwiper-title {
        font-size: 1.5rem;
    }

    .history .text-area {
        padding-top: 120px;
    }

    .innerSwiper .swiper-slide {
        width: 100% !important;
        padding: 10px;
    }

    .history-area {
        gap: 0px !important;
    }

    .sub-text-area {
        margin-bottom: 1rem !important;
    }

    .marketing-wrapper {
        width: 100%;
        padding: 2rem;
        margin: 0 auto;
    }

    .marketing-wrap-title h1::after {
        width: 20px;
        height: 20px;
        background-size: 20px;
        transform: translateX(-50%);
    }

    .marketing-area {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .marketing-title {
        font-size: 1.8rem;
    }



    .root_daum_roughmap_landing {
        width: 100% !important;
        height: 50% !important;
    }

    .root_daum_roughmap .wrap_map {
        height: 200px !important;
    }

    .secen-map {
        width: 100% !important;
        height: 50% !important;
    }

    .secen-map div {
        height: 100% !important;
    }

    .secen-map .map {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;

    }



    .address-tile {
        width: 100%;
        font-size: 1.5rem;
    }

    .address-subtitle {
        font-size: 1.6rem !important;
    }

    .address-tile::after {
        left: 1%;
    }

    .map-btn {
        justify-content: center;
    }

    .map-btn button {
        /* width: 40%; */
        font-size: 1.2rem;
    }

    .address-box {
        width: 100%;
    }

    #footer {
        width: 100%;
    }

    .footer-wrap {
        width: 100%;
    }

    .footer-text div {
        flex-wrap: wrap;
    }

    .footer-text div p,
    .footer-text p {
        width: 100%;
        font-size: 1.2rem !important;
        padding-left: 0px !important;
    }

    .about-wrap {
        width: 100%;
        padding: 9rem 2rem;
    }

    .container {
        width: 100%;
    }

    .about-title-sub {
        font-size: 1.2rem;
    }

    .about-area {
        flex-wrap: nowrap;
        width: 100%;
        /* height: 10%; */
        margin-bottom: 10px !important;
        /* flex-direction: column; */
        gap: 10px !important;
    }

    .about-radius-left::after,
    .about-radius-bottom-right::after,
    .about-radius-bottom-left::after,
    .about-radius::after,
    .about-radius-right::after {
        display: none;
    }

    .about-area p {
        font-size: 1.2rem;
    }

    .month-text p {
        font-size: 1.2rem;
    }




    .about-text {
        font-size: 1.5rem;
    }


    .about-vision-box {
        flex-wrap: nowrap;
    }

    summary::-webkit-details-marker {
        display: none;
    }

    .slideText {
        padding: 10px;
    }

    .slideText p:last-child,
    .slideTextDtail p {
        font-size: 1.5rem;
    }

    .slideText p:first-child {
        font-size: 1.2rem;
    }

    .content img {
        width: 38%;
    }

    .slideTextDtail p {
        font-size: 1.3rem;
        border-bottom: 0px !important;
        margin-bottom: 0.5rem;
    }

    .slideTextDtail div div {
        display: none;
    }


    .about img {
        width: 100%;
        /* height: 300px !important; */
    }

    .about-vision-box img {
        height: 300px;
    }

    .about-vision-box {
        height: 200px;
    }


    .timeline {
        width: 100%;
    }

    .years {
        display: flex;
        justify-content: space-between;
        width: 100%;
        border-bottom: 1px solid #333;
    }

    .active-year {
        font-size: 2rem;
    }

    .contents {
        text-align: center;

    }

    .month {
        text-align: left !important;
    }

    .month-text div {
        width: 100%;
        flex-wrap: nowrap;
    }

    .taken-wrap-box {
        width: 100% !important;
        gap: 10px !important;
    }

    .taken-area {
        width: 100%;
        height: 0% !important;
        align-items: start;
        gap: 5px !important;
    }


    .taken-box {
        width: 100%;
        /* flex-direction: column; */
        gap: 5px;
    }

    .taken-box p {
        font-size: 1.2rem;
    }

    .taken-area p {
        font-size: 1rem;
    }

    .text-box-title {
        margin-bottom: 0px;
        font-size: 1rem;
        margin-left: 20px;
    }

    .solution-after {
        justify-content: start;
    }


    .solution-title::after,
    .traffic-title::after,
    .ai-title::after,
    .meta-title::after,
    .smart-title::after {
        display: none;
    }

    .traffic-video {
        width: 90%;
    }

    /* .solution-area {

        gap: 40px !important;
        height: calc(100% - 141.61px) !important;
    } */
    .solution-area {
        width: 100%;
        grid-template-columns: 1fr;
    }

    .solution-text-box {
        padding: 10px 15px !important;
    }

    .solution-text-box p {
        padding-left: 5px;
    }

    .solution-text-box div {
        gap: 0px !important;
    }

    .solution-text-box div div p {
        width: 100%;
    }





    .etc-grid-box {
        flex-wrap: nowrap;
    }

    .smart .etc-wrap-text .smart-img {
        width: 50%;
    }



    .box-wrap p {
        padding: 10px !important;
        font-size: 1.2rem !important;
    }

    .box-wrap-title {
        font-size: 2rem !important;
    }

    .text-box-title::after {
        left: -17px;
        top: 0px;
    }

    .solution .swiper-slide img {
        height: 130px !important;

    }

    .swiper-slide img {
        object-fit: contain;
    }

    .traffic-button {
        padding: 2rem 0;
        justify-content: center;
    }

    .traffic-area img {
        height: 130px !important;
    }

    .logo {
        width: 50% !important;
        background-size: cover;
    }

    .accordion {
        padding: 1rem 3rem;
    }

    .accordion1::before,
    .accordion2::before,
    .accordion3::before {
        left: 11px;
    }

    .mobil-wrap {
        width: 50%;
    }

    .mobil-wrap button {
        width: 100%;
        text-align: right;
    }

    .box:hover,
    .box-wrap div img:hover {
        transform: scale(1);
    }

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



    .customized-wrap-title {
        margin-top: 50px;
        margin-bottom: 1rem;
    }

    .etc-wrap-title h1 {
        padding-top: 0rem;
    }

    .etc-box-title {
        font-weight: 900;
        text-align: center !important;
        font-size: 2.2rem !important;
    }

    .etc-box p {
        text-align: left;
    }

    .box-grid {
        grid-template-columns: 1fr 1fr 1fr !important;
    }


    .box-wrap img {
        padding-bottom: 0rem !important;
        object-fit: contain;
    }


    .box-wrap div p {
        padding: 1px;
        margin-bottom: 0rem !important;
        font-size: 1.4rem !important;
    }

    .etc-box-title {
        font-weight: 700;
        text-align: center !important;
        font-size: 1.6rem !important;
    }

    .box-wrap div div {
        height: 37% !important;
    }

    .etc-wrap-title h1,
    .customized-wrap-title h1 {
        font-size: 3rem !important;
    }

    .etc-wrap-title p,
    .customized-wrap-title p {
        font-size: 1.5rem !important;
    }

  

    .customized-box div {
        width: 100%;

        margin-bottom: 10px;
    }

    .customized-box p {
        font-size: 1.1rem !important;
    }

    .customized-box div img {
        width: 79%;
    }

    .etc-box-title {
        margin-bottom: 0px;
    }

    .etc-box-title p {
        padding-left: 0px;
    }

    .etc-box p {
        padding-left: 0px;
    }

    .solution-box {
        gap: 10px;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6 {
        width: 100%;
        font-size: 1.2rem;
        background-size: cover;
        background-position: center;
        padding: 177px 26px 10px 10px;
    }

    .innerSwiper {
        height: 90% !important;
    }

    .box2,
    .box4 {
        transform: translateY(0px);
    }



    .etc-box {
        width: 100%;
    }

    .swiper-slide {
        -ms-overflow-style: none;
        /* 인터넷 익스플로러 */
        scrollbar-width: none;
        /* 파이어폭스 */
    }


    #Data,
    #smart,
    #visuali,
    #customized,
    #dataanalysis {
        height: 100% !important;
        overflow-y: scroll !important;
        padding-top: 120px;
    }

    .etc-wrap-text {
        width: 100%;
    }

    .visuali-text {
        width: 100%;
        flex-direction: column;
    }

    #smart .etc-wrap-text{
        flex-direction: column;

    }
    #dataanalysis .etc-wrap-text div{
        width: 48%;
        margin: 0 auto;
        flex-wrap: wrap !important;
    }
  
    #etc .etc-box-title{
        font-size: 1.7rem !important;
        padding: 0px;
        text-align: center;
        font-weight: 600;
        word-break: keep-all;
    }
    #customized .box-wrap{
        flex-direction: column;

    }
}