@charset "utf-8";
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

@font-face {
    font-family: 'GmarketSansMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansBold';
    src: url('../font/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'GmarketSansLight';
    src: url('../font/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KIMM_Light';
    src: url('../font/한국기계연구원_Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'KIMM_Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2212@1.0/KIMM_Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}





/* layout */

* {
    word-break: keep-all;
}

html,
body {}

html {
    width: 100%;
    font-size: 62.5%;
    /* 10px */
}

* html * {
    zoom: 1;
}

body {
    width: 100%;
    height: auto;
    font-size: 1.6rem;
    overflow-x: hidden;
}

body.open {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.content {}



.inner {
    width: 100%;
    max-width: 176rem;
    margin: 0 auto;
}

#site_main .inner {
    width: 100%;
    max-width: 140rem;
    margin: 0 auto;
}

.tb, .tb_mb,
.mb {
    display: none;
}

.txtbold {
    font-family: 'GmarketSansBold';
}

.txtlight {
    font-family: 'GmarketSansLight';
}

.blue {
    color: #5064AE;
}

.bluebg {
    background-color: #5064AE;
}

.black {
    color: #000 !important;
}

.blackbg {
    background-color: #000;
    color: #fff;
}

.white {
    color: #ffff;
}

.whitebg {
    background-color: #ffff !important;
    color: #000 !important;
}


:root {
    --blue-color: #5064AE;
    --black-color: #000;
    --black-color1: rgba(0, 0, 0, 0.2);
    --black-color2: rgba(0, 0, 0, 0.38);
    --black-color3: rgba(0, 0, 0, 0.6);
    --white-color: rgb(255, 255, 255);
    --white-color1: rgb(255, 255, 255, 0.38);
    --green-color: #00FFEB;
    --bg-color: #F8F8F8;
    --font-kB: 'KIMM_Bold';
    --font-kL: 'KIMM_Light';
    --font-sR: 'SUIT-Regular';
    --font-gM: 'GmarketSansMedium';
    --font-gB: 'GmarketSansBold';
    --font-gL: 'GmarketSansLight';
    --head-height: 92px;
    --line-height:calc(100% - 40px);
    --line-top:46px;
}

h1 {
    font-size: 12rem;
    font-family: var(--font-kB);
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
}

h2 {
    position: relative;
    font-size: 6rem;
    text-align: center;
    line-height: 1.6;
}

h3 {
    font-size: 4.8rem;
    text-align: center;
    line-height: 1.4;
}

strong {
    font-family: var(--font-kB);
}

h5 {font-size: 3.2rem;}

/* header */

header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
}

.header {
    height: auto;
    background-color: transparent;
}

.header .inner {
    display: flex;
    align-items: center;
    height: var(--head-height);
    justify-content: space-between;
}

body.scroll .header {
    background: #000;
    backdrop-filter: blur(30px) brightness(100%);
    -webkit-backdrop-filter: blur(30px) brightness(100%);
}

.noscroll {overflow: hidden;}

.logo {
    display: flex;
    justify-content: center;
    height: 100%;
}

.logo img {
    height: 40px;
    width: auto;
    padding: 33px 0 19px;
}

body.scroll .header .logo img {
    filter: invert(1);
}

.topnav {
    display: flex;
    width: fit-content;
}

.topnav a {
    display: flex;
    white-space: nowrap;
    font-size: 2rem;
    font-family: var(--font-kB);
    animation: all 0.2s linear;
}

.topnav a:not(:last-child) {
    margin-right: 60px;
}

.topnav a.active {
    display: none;
}

body.scroll .topnav a {
    color: #fff;
}

.menu {
    margin-right: 12px;
}

body.scroll .header .menu svg {
    filter: invert(1);
}

body.scroll #site_Manager  .header .menu svg {filter: invert(0);}

.nav .logo {
    width: calc(100% - 32px);
    margin-left: 32px;
}

.nav {
    display: none;
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100000 !important;
}

body.open .nav {
    display: block;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(30px) brightness(100%);
    -webkit-backdrop-filter: blur(30px) brightness(100%);
    overflow-y: overlay;
}

.nav .nav_top {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-top: 11.9rem;
    padding-bottom: 11.6rem;
}

.nav ul li {
    width: 100%;
    text-align: center;
}

.nav ul li a {
    display: block;
    padding: 47px 0;
    width: fit-content;
    margin: 0 auto;
}

.nav ul li a span {
    font-size: 6rem;
    font-family: var(--font-kB);
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: transparent;
}

.nav ul li:hover span {
    color: var(--black-color);
    -webkit-text-fill-color: var(--black-color);
}


/* btn */
.btn {
    display: inline-block;
    width: auto;
    max-width: 360px;
    height: auto;
    max-height: 80px;
    padding-top: 30px;
    padding-bottom: 28px;
    text-align: center;
    font-family: var(--font-kB);
    font-size: 2rem;
}

.btn.whitebg {
    border-radius: 40px;
}

.btn.blackbg {
    border-radius: 50px;
}



/* main */
.sec_main {
    position: relative;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}

.main_txt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 90%;
    height: 100%;
    text-align: center;
}

.sec_main_slider .main_txt {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 90%;
    height: 100%;
    text-align: center;
}

.main_txt p {
    font-size: 4rem;
    margin-top: 30px;
    line-height: 1.6;
}

.main_txt h1,
.main_txt p {
    color: var(--white-color);
}

.overflow {
    overflow: hidden;
}

.slide-up {
    transform: translateY(40px);
    opacity: 0;
}

.slide-up-it {
    transform: translate(0);
    opacity: 1;
}


#sec_main_slider.slick-slider {
    height: 100%;
    max-height: 100%;
    min-height: 100%;
}

#sec_main_slider .slick-prev {display: none;}
#sec_main_slider .slick-slide {padding: 0;}
#sec_main_slider .slider_item {display: block; width: 100%; height: 100%; position: relative;}
#sec_main_slider .slick-track {display: block; width: 100%; height: 100%;}
#sec_main_slider .slick-list {position: relative; width: 100%; height: 100%;}


.background {
    width: 100%;
    height: 100%;
    max-width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: multiply;
    animation: scale 2s linear;
}

.sec_main .background {
    background-image: linear-gradient(to bottom, transparent 0%, #000 100%), url('../img/main_bg.png');
}


/* #sec_main_slider .background {
    height: 100vh;
    animation: none;
} */

/* #sec_main_slider .slick-active .background {
    animation: scale 2s linear;

} */


/* #sec_main_slider .background.back1 {
    background-image: linear-gradient(to bottom, transparent 0%, #000 100%), url('../img/main_bg.png');
} */

/* #sec_main_slider .background.back2 {
    background-image: linear-gradient(to bottom, transparent 0%, #000 100%), url('../img/main_bg.png');

}

#sec_main_slider .background.back2 {
    background-image: linear-gradient(to bottom, transparent 0%, #000 100%), url('../img/main_bg.png');

} */

.background.bg_contact {
    background-image: linear-gradient(to bottom, transparent 0%, #fff 100%), url('../img/contactus_bg.png');
}

/* .background {
    display: block;
    position: relative;
    object-fit: cover;
    width: 100%;
    height: 100%;
    max-width: 100%;
} */


/* sec_txt */
.sec_txt {
    background-color: var(--black-color);
    padding: 20rem 0;
}
.sec_txt h2 {
    color: var(--white-color);
    text-align: center;
    margin-bottom: 76px;
}

.sec_txt strong{
    color: var(--white-color);
}

/* Image */
.sec_img {
    background-color: var(--black-color);
    padding: 16rem 0;
}

.sec_img h2 {
    color: var(--white-color);
    text-align: center;
    margin-bottom: 76px;
}

.sec_img .img_area {
    width: 100%;
    height: 100%;
    /* max-height: 560px; */
    position: relative;
    border-radius: 0;

}

.sec_img .img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 289.188px;
    position: relative;
    left: 0;
}

/* packet */

.sec_packet {
    background-color: var(--black-color);
    padding: 16rem 0 0;
}

.sec_packet h2,
.sec_packet strong {
    color: var(--white-color);
}

/* .packet_wrap {
    margin-top: 80px;
} */

.packet_cont {
    width: 100%;
    min-height: 121px;
    position: relative;
    overflow-x: hidden;
}

.packet p {
    font-size: 3.2rem;
    padding-bottom: 30px;
    color: var(--white-color);
}

.packet_cont svg {
    border-top: 1px solid rgba(255, 255, 255, 0.38);
    border-bottom: 1px solid rgba(255, 255, 255, 0.38);
}

.packet#lose {
    margin-bottom: 80px;
}

.packet#lose svg>rect,
.packet#lose svg g {
    animation: move 10s linear infinite;
}

.packet_btn {
    margin:40px auto 0;
    display: block;
    text-align: center;
}


.packet_btn button {
    font-size: 2rem;
    color: var(--white-color);
    font-family: 'KIMM_Bold';
    border:2px solid #fff;
    border-radius:40px;
    padding:20px 40px;
    text-align:center;
    width: fit-content;
}


/* .packet#lose .packet_cont:hover svg>rect { 
    fill: #5064AE;
    stroke: #5064AE;
} */

/* .packet#lose .packet_cont:hover svg>line, 
.packet#delay .packet_cont:hover svg>line {
    stroke: var(--blue-color);
} */
/* 
.packet#lose .packet_cont:hover svg>g {
    fill: #5064AE;
    stroke: #5064AE;
    stroke-dasharray: none;
    opacity: 1;
} */

/* .packet#delay .packet_cont:hover text ,.packet#delay .packet_cont:hover path {
    opacity: 0;
} */

/* .packet#delay .packet_cont:hover svg rect.sm {
    height: 150px;
    y:30;
    transform-box: fill-box;
    transform-origin: initial;
    opacity: 1;
    fill: var(--blue-color);

} */

.packet#delay .packet_cont svg rect:not(.small):not(.big) {
    animation: mov 3s linear infinite;
    animation-fill-mode: both;
}

.packet#delay .packet_cont svg rect.big {
    animation: big 3s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
    animation-fill-mode: both;
}

.packet#delay .packet_cont svg rect.small {
    animation: small 3s linear infinite;
    transform-box: fill-box;
    transform-origin: center;
    animation-fill-mode: both;
}

.losepacket {
    transition: opacity 0.5s ease;
    /* opacity 속성이 변경될 때 0.5초 동안 부드럽게 변경되도록 설정 */
}

.fade-out {
    opacity: 0;
    /* 요소가 투명해지도록 설정 */
}

/* .packet#delay .packet_cont svg{ height: 211px;} */

/* .packet#delay .packet_cont:hover svg#delay2>rect {
    fill: #5064AE;
    stroke: #5064AE;
} */


@keyframes scale {
    0% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes move {
    0% {
        transform: none;
    }

    100% {
        transform: translateX(-810px);
    }
}

@keyframes mov {
    0% {
        transform: none;
    }

    100% {
        transform: translateX(-116px);
    }
}

@keyframes small {
    0% {
        height: 150px;
        opacity: 1;
        transform: none;
    }

    5% {
        height: 150px;
        opacity: 1;
    }

    95% {
        height: 90px;
        opacity: 0.6;
    }

    100% {
        height: 90px;
        transform: translate(-116px, 30px);
        opacity: 0.6;
    }
}

@keyframes big {
    0% {
        opacity: 0.6;
        height: 90px;
    }

    8% {
        height: 90px;
    }

    100% {
        opacity: 1;
        height: 150px;
        transform: translate(-116px, -30px);
    }
}

.transition {
    height: 48rem;
    background: linear-gradient(180deg, #000, #fff);
}

.packet_cont ul {
    display: flex;
    padding: 0 1.072%;
    position: relative;
}

.packet_cont ul li {
    max-height: 150px;
    max-width: 95px;
    width: 6.93%;
    height: auto;
    aspect-ratio: 19 / 30;
    border: 1px solid white;
    min-width: 60px;
    min-height: 80px;
    border-radius: 20px;
    background: white;
}

.packet_cont ul li:not(:last-child) {
    margin-right: 1.533%;
}

.packet_cont .line {
    height: 1px;
    background-color: rgba(255, 255, 255, 0.38);
    width: 100%;
}

.packet_cont .packet_area {
    position: relative;
    width: 100%;
    height: 100%;
}

.packet_cont .up,
.packet_cont .down {
    position: relative;
}

.packet_cont .up img,
.packet_cont .down img {
    display: block;
    margin: 0 auto;
    max-width: 500px;
}

.packet_cont .up p,
.packet_cont .down p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.17rem;
    color: red;
    padding: 0;
}


#packetModal h5 {margin-bottom: 38px;}
#packetModal p {font-size: 2rem; margin-bottom: 40px; line-height: 1.4;}
#packetModal .modal-body {text-align: left;}
#packetModal .modal-img {width: 100%; margin-bottom: 40px; overflow-x: auto;}
#packetModal .modal-img::-webkit-scrollbar {display: none;}
#packetModal .modal-img img {width: auto; height: 100%; object-fit: contain;}

/* solution */
.sec_sol {
    z-index: 3;
    position: relative;
    padding-top: 16rem;
    display: block;
    padding-bottom: 16rem;
}

.sec_sol h2 {
    margin-bottom: 77px;
}

.sol_list {
    width: 100%;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* padding-top: 10rem; */
    box-sizing: border-box;
    /* margin: 8.75% auto 0; */
}

.sol {
    position: sticky;
    background-color: #F8F8F8;
    width: 100%;
    border-radius: 20px;
    margin-bottom: 80px;
    box-sizing: border-box;
    /* box-shadow: 0px 10px 20px 0px rgb(0,0,0,0.12); */

}

.sol::after {
    display: block;
    content: "";
    padding-bottom: 33.999999%;

}

.sol_cont_wrap {
    display: flex;
    position: absolute;
    inset: 0;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.sol:nth-child(1) {
    top: 20rem;
    box-shadow: 0px 10px 20px 0px rgb(0, 0, 0, 0.12);
}

.sol:nth-child(2) {
    z-index: 1;
    top: 20rem;
}

.sol:nth-child(3) {
    z-index: 2;
    top: 20rem;
}

.sol:last-of-type {
    z-index: 3;
    top: 20rem;
}

.txt_area {
    width: 44.286%;
    padding: 5.7866% 5% 5.6439% 5.715%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}


.txt_area .sol_cont .detail{
    display: block;
    margin-top: 20px;
    font-size: 2rem;
    font-weight: bold;
    color:rgba(0,0,0,0.6);
}


.sec_sol h4 {
    font-size: 5.6rem;
    font-family: var(--font-kB);
}

.sec_sol h4 br {
    display: none;
}

.sub_tit {
    font-size: 3.2rem;
    font-family: var(--font-kB);
    margin-top: 28px;
    color: var(--black-color3);
    /* margin-bottom: 13.626%; */
}

.txt_area .sol_cont {
    font-size: 2.4rem;
    line-height: 1.38;
}

.img_area {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-item-align: end;
    align-self: flex-end;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
    height: 100%;
    width: 50%;
}

.img_area img {
    display: block;
    width: 100%;
    height: 100%;
}

/* benefit */

.sec_bnf {
    padding: 4rem 0 8rem 0;
    overflow-x: hidden;
}

/* .sec_bnf .inner {
    max-width: 176rem !important;
} */

.sec_bnf h2 {
    margin-bottom: 80px;
}

.sec_bnf .inner {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.sticky {
    padding-top: 12rem;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.horizontal {
    width: fit-content;
    display: flex;
    flex-wrap: nowrap;
    height: calc(100vh - 386px);
    position: relative;
}

.bnf_img {
    width: calc(100% - 80px);
    height: calc(100% - 105px);
}

.bnf_img img {
    width: auto;
    height: 100%;
    display: block;
}

.box_txt_wrap {
    z-index: 1;
    position: absolute;
    bottom: 0;
    right: 40px;
}

.box_txt {
    background-color: var(--white-color);
    box-shadow: rgba(0, 0, 0, .16) 3px 3px 15px;
    padding: 40px;

}

.box_txt span {
    font-size: 2.4rem;
    font-family: var(--font-kB);
    margin-bottom: 5px;
    display: block;
}

.bnf_cont {
    position: relative;
    padding-right: 40px;
    padding-left: 40px;
    box-sizing: border-box;
    flex-shrink: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    max-width: 800px;
    max-height: 585px;

}

.bnf_cont:first-child {
    margin-left: 3.372%;
    padding-left: 0;
}

.bnf_cont:nth-of-type(4) {
    margin-right: 3.372%;
    padding-right: 0;
}

.bnf_cont:nth-of-type(4) .box_txt {
    right: 0;
}

.bnf_cont.pc {
    width: 0px;
    padding: 0 1px;
    margin-right: 3.372%;
}

.box_txt p {
    font-size: 2rem;
    line-height: 1.5;
    white-space: normal;
}

.scrollbar_wrap {
    display: block;
    width: 100%;
    max-width: 1400px;
    margin: 80px auto 0 auto;
    height: 1px;
    background: #000;
    position: absolute;
    z-index: 10;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 80px;

}

.handler {
    width: 200px;
    height: 5px;
    background: #000;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    z-index: 20;
}


/* place */

.sec_place {
    padding: 16rem 0;

}

.sec_place h2 {
    margin-bottom: 151px;
}

.sec_place h2 br {
    display: none;
}

.place_area {    
}
    
.place_conts {
    position: sticky;
    top: var(--head-height);
    height: calc(100vh - var(--head-height));
    display: flex;
}

.place_cont {
    overflow: hidden;
    height: 100%;
    flex: 1;
    transition: flex 1200ms cubic-bezier(0.23, 1, 0.32, 1);
    will-change: flex;
    position: relative;
}

.place_cont:hover {
    flex: 0 1 60%;
}

.place_conts.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Ensure it appears above other content */
    width: 100%; /* Make it span the full width */
}

.place_conts article.on {
    flex: 0 1 60%;
}

.place_img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.place_img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sec_place .place_title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.sec_place .place_title h5 {
    font-size: 3.2rem;
    font-family: var(--font-kB);
    color: var(--white-color);
    text-align: center;
    line-height: 1.6;
    white-space: nowrap;

}

.sec_place .place_title p {
    font-size: 0;
    text-align: center;
    color: var(--white-color);
    margin-top: 0px;
    opacity: 0;
    transition: opacity, margin 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    line-height: 1.6;
    white-space: nowrap;

}


.place_cont:hover .place_title p {
    opacity: 1;
    transition: opacity, margin 1s cubic-bezier(0.165, 0.84, 0.44, 1);
    margin-top: 30px;
    font-size: 2.4rem;
}

/* country */
.sec_country {
    padding: 16rem 0;
}

.sec_country .inner {
    max-width: 176rem;
}

.sec_country h2 {
    text-align: start;
    line-height: 1.47;
    display: flex;
    flex-wrap: wrap;

}

.sec_country h2 br:not(:nth-of-type(2)) {
    display: none;
}


.cont_area {
    position: relative;
    margin-top: 44px;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(5, auto);
}

.fixed_p {
    position: relative;
    width: 183px;
}

.fixed {
    position: absolute;
    right: 0;
}

.tab_area {
    display: inline-block;
    margin-top: 120px;
    grid-row: 1 span;
    grid-column: 1;
}

.tab_wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}


.tab_list {
    padding: 0 19px;
}

.tab_list:first-of-type {
    padding-left: 0;
}

.tab_list:last-of-type {
    padding-right: 0;
}

.tab_list button {
    display: block;
    padding: 7px 0;
    position: relative;
}

.tab_list button p {
    font-size: 2rem;
    color: var(--black-color1);
    font-family: var(--font-kL);
}

.tab_list button.act p {
    color: var(--black-color);
    font-family: var(--font-kB);
}

.tab_list button.act::after {
    content: "";
    display: block;
    left: 0;
    background-color: var(--blue-color);
    transform: scale(1);
    height: 4px;
    position: absolute;
    bottom: 0;
    width: 100%;

}

.tab_cont.act {
    display: block;
}

.tab_map_area {
    grid-row: 1 / 6;
    grid-column: 2 / 3;
    max-width: 960px;
    max-height: 720px;
    margin-right: 0;
    margin-left: auto;
    width: 100%;
    display: flex;
}

.tab_map svg {
    width: 100%;
    height: 100%;
}

.tab_map.act {
    display: block;
}

.sec_country .tab_cont_tit {
    margin-top: 47px;
    width: 100%;
    grid-row: 2;
}

.tab_cont .tit {
    font-size: 2.4rem;
}

.tab_cont .tit br {
    display: none;
}

.tab_cont .tit strong {
    font-size: 12rem;
}

.tab_cont_txt {
    max-width: 720px;
    grid-row: 3 / 5;
}

.tab_cont_txt .tab_box {
    display: block;
    padding: 5.648% 15.495% 6.082% 5.794%;
    background-color: rgb(80, 100, 174, 0.05);
    border-radius: 20px;
    margin-top: 34px;
}

.tab_cont_txt .tab_box ul li {
    position: relative;
    font-size: 2.4rem;
    padding-left: 32px;
    letter-spacing: -0.043em;
    line-height: 1.6;
    word-break: keep-all;
}

.tab_cont_txt .tab_box ul li:not(:last-of-type) {
    margin-bottom: 30px;
}

.tab_cont_txt .tab_box ul li::before {
    content: "";
    display: block;
    position: absolute;
    top: 16px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #5064AE;
    background: var(--white-color);

}


/* model */
.sec_model {
    padding: 160px 0;
}

.sec_model h3 {
    margin-bottom: 77px;
    padding: 0 2rem;
}

.model_wrap {
    width: 100%;
    overflow-x: hidden;
}

.all_btn {
    text-align: center;
}

.all_btn .btn {
    width: 100%;
}

.slick-slider {
    width: 100%;
    min-height: 175px;
}

.slick-slide img {
    width: 100%;
}

.slick-slide {
    padding: 0px 1.226%;
}

.model_new {
    display: block;
    width: 100%;
    max-width: 840px;
    max-height: 420px;
    margin: 0 auto;
}

.model_new img {
    width: 100%;
    display: block;
}

/* contact */
.sec_cont {
    background-color: var(--black-color);

}

.sec_cont .inner {
    max-width: 176rem !important;
}

.sec_cont .contact {
    display: flex;
    justify-content: space-between;
    padding: 119px 0 110px 0;
    border-bottom: 1px solid rgb(255, 255, 255, 0.38);
}

.sec_cont .contact .txt_l {
    font-size: 3.2rem;
    color: var(--white-color);
    font-family: var(--font-kL);
    line-height: 1.3;

}


.btn_area .btn {
    padding-left: 117px;
    padding-right: 117px;
}

.modal-wrap .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow: hidden;
    outline: 0;
    overflow-y: auto;
}

.modal-wrap .modal .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1040;
    background: rgba(0, 0, 0, 0.5);
}

.modal-wrap .modal .modal-content {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ebedf2;
    border-radius: 20px;
    outline: 0;
    z-index: 1050;
}

.modal-wrap .modal.open {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 17px;
}

.modal-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: end;
    padding: 4rem;
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.modal-body {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 4rem;
    padding-top: 0;
    box-sizing: border-box;
    display: block;
    box-sizing: border-box;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
}

.modal-body::-webkit-scrollbar {
    display: none;
}

.modal-header .close {

    background: url('../img/icon_cart.png')no-repeat center center;
    background-size: 44px;
    width: 44px;
    height: 44px;
}

.modal-body .product {
    width: 100%;
    height: 100%;
    position: relative;
    white-space: nowrap;
}

.product table {
    width: 100%;
    height: auto;
}

.product .table_model {
    color: rgba(0, 0, 0, 0.6);
}

.product thead {
    background-color: rgba(80, 100, 174, 0.1);
}

.product thead th {
    border: none;
    color: rgba(80, 100, 174, 1);
    padding: 26px 0;
    font-family: var(--font-kB);
}

.product thead tr {
    border-radius: 5px;
}

.product tbody tr:last-of-type td {
    border-bottom: 1px solid #000;
    padding-bottom: 13.5px;
}

.product tbody td {
    text-align: center;
    padding: 15px 0;
    border-bottom: 1px dashed #d9d9d9;
    font-size: 1.2rem;
    font-family: "Noto Sans KR", sans-serif;
}

.product thead th,
tbody td {
    border-right: none;
    border-left: none;
    margin: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    pointer-events: none;
    max-width: 1400px;
    margin: 1.75rem auto;
    min-height: calc(100% - 1rem);
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    box-sizing: border-box;

}

.modal-dialog::before {
    height: calc(100vh - 1rem);
}

.modal-wrap .modal.modal-pop.open .modal-content {
    animation: popupMotion 0.5s forwards;
}

.modal-wrap .modal.modal-bottom.open .modal-content {
    animation: bottomMotion 0.5s forwards;
}

/*
      .modal이름을 가진 div에 각각에 맞는 클래스를 추가해줍니다
      forwards를 이용해 animation효과가 지속되게합니다.
      */

@keyframes popupMotion {
    from {
        transform: scale(0);
    }

    to {
        transform: scale(1);
    }
}

@keyframes bottomMotion {
    from {
        margin-top: 100%;
    }

    to {
        margin-top: 0;
    }
}

/* footer */
.footer {
    background-color: var(--black-color);
    padding: 6rem 0 8.1rem 0;
}

.footer .about {
    display: flex;
}

.footer .about .f_logo {
    width: 35.28%;
}

.footer .about .f_logo img {
    filter: invert(1);
    width: auto;
    height: 60px;
}

.footer .f_about {
    width: 64.72%;
    padding-top: 12px;
}

.address,
.mail,
.mail a,
.tel,
.tel a {
    font-size: 2rem;
    line-height: 4.5rem;
    vertical-align: bottom;
    color: var(--white-color);
}
.tel,
.mail {display: inline-block;}

.copyright {
    color: var(--white-color1);
    padding-top: 2.6rem;
}

/* ========================================== contactus ========================================== */


#site_contact .sec_contact1,
#site_contact .sec_contact2 {
    padding: 16.1rem 0 16rem 0;
}

#site_contact h2,
.contact_tit,
.contact_subtit {
    font-family: var(--font-kB);
    text-align: start;
}

.contact_tit {
    font-size: 4rem;
}

.contact_subtit {
    font-size: 2.4rem;
    color: var(--blue-color);
    padding-bottom: 19px;
}

.contact_logo {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 20px;
    width: auto;
}

.sec_contact1 .contact_logo {
    padding: 100px 0;
    margin: 80px 0;
}

.sec_contact1 .contact_logo img {
    height: 120px;
    max-width: 100%;
}

.contact_area {
    display: flex;
    justify-content: space-between;
}

.contact_com {
    flex: 0 0 50%;
    width: 50%;
}

.sec_contact2 #salesparter1 .contact_logo {
    padding: 30.97% 10%;
}

.sec_contact2 #salesparter2 .contact_logo {
    padding: 33.71% 10% 33.55% 10%
}

.sec_contact2 #salesparter1 .contact_logo img {
    max-height: 92px;
    max-width: 100%;
}

.sec_contact2 #salesparter2 .contact_logo img {
    max-height: 63px;
    max-width: 100%;
}

.sec_contact2 #salesparter1 {
    margin: 76px 0 80px 0;
}

.sec_contact2 .contact_tit {
    padding-bottom: 37px;
}

.sec_contact2 .contact_logo_wrap {
    padding-right: 5.715%;
    width: 100%;
}

.contact_cate {
    display: flex;
    flex-direction: column;
}

.contact_cate dl {
    display: flex;
    font-size: 2rem;
    font-family: var(--font-kL);
    line-height: 1.6;

}

.contact_cate dl:not(:last-of-type) {
    padding-bottom: 20px;
}

.contact_cate dt {
    color: var(--black-color2);
    padding-right: 20px;
    flex: 0 0 94px;
}

.contact_cate dt,
.contact_cate dd {
    vertical-align: text-bottom;
}

.contact_cate dd div.outlink {
    width: 100%;
}

.outlink {
    display: inline-block;
    line-height: normal;
}

.outlink.map {
    padding-top: 20px;
}

.outlink a {
    display: block;
    width: fit-content;
    border-bottom: 2px solid var(--blue-color);
}

.outlink span {
    display: block;
    margin-bottom: 5px;
    width: fit-content;
    color: var(--blue-color);
    font-size: 1.6rem;
}

.outlink img {
    width: 14px;
    height: 14px;
    padding-left: 5px;
    vertical-align: middle;
}

.border {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, .12);
}

.email {
    display: flex;
    flex-wrap: wrap;
}

.contact_cate dd .email:nth-of-type(2) {
    padding-top: 20px;
}

/*================================== Subpage > Tbridge ================================== */

.sub_txt p {font-size: 2.4rem; font-family: var(--font-kL); line-height: 1.6;}
.sub_txt p+p {margin-top: 39px !important;}
#site_bridge .background{background-image: linear-gradient(to bottom, transparent 0%, #fff 100%), url("../img/birdge_bg.png");}
#site_bridge h2 {text-align: start;}

.sec_swipe {overflow-x: hidden;}
.sec_swipe .sub_txt { margin: 76px 0 ;}
.sec_swipe h5 {margin-top: 79px; margin-bottom: 38px;}
.sec_swipe .slick-slide {padding: 0px 0.3188%;}
.dashboard_wr {position: relative;}
.monitor {position: relative;   width: 100%;}
.monitor img {position: relative; z-index: 1; width: 37.5%; height: auto; margin-right: 14%; margin-left: auto; display: block;}
.swipe_wr {position: absolute; top: 11.5%;}
.swipe_wr .slick-slide img {height: 100%; box-shadow: rgba(0,0,0,0.16) 0px 3px 6px; width: 100%; transform: scale(0.85); transition: scale 0.2s linear;}
.swipe_wr .slick-slide.slick-active.slick-center {transform: scale(1.05);}
.swipe_wr .slick-slide.slick-active.slick-center img {box-shadow: none;transform: scale(1); }
.slick-list {overflow: unset;}
.swipe_wr .swipe_item {width: fit-content;}


.rate_wr {width: 100%;}
.rate_wr img {width: 100%; height: auto;}



/* sec_sub_packet */
.sec_sub_packet {}
.sec_sub_packet .sub_packet + .sub_packet {margin-top: 80px;}
.sec_sub_packet .sub_packet p {font-size: 3.2rem; margin-bottom: 30px;}
.bridge_tit_wrap {margin-bottom: 80px;}
.bridge_tit_wrap > p {font-size: 4rem; line-height: 1.6;}
.sub_packet img {width: 100%; height: auto;}
.sec_sub_packet .sub_txt p+p {margin-top:0 !important;}


.sec_TrafficManagement {}



/*================================== Subpage > T-Manager ================================== */
.divider {display: block; height: 1px; background-color: rgba(0, 0, 0, .12); width: 100%; max-width: 1760px; margin: 0 auto;}

#site_Manager .background{
    background-image: linear-gradient(to bottom, transparent 0%, #fff 100%), url('../img/manager_bg.png');
}

#site_Manager .topnav a {color: white;}
#site_Manager .logo img {filter: invert(1);}
#site_Manager .menu svg {fill: #fff;}
#site_Manager h2, #site_Manager h5 {text-align: left; font-family: var(--font-kB);}
 .sec_traffic h2, .sec_connection h2 {margin-bottom: 80px;}
.sec_dashboard h2 {margin-bottom: 40px;}

/* 실시간 운영관리 */
.sec_operation, .sec_dashboard, .sec_connection,  .sec_scroll, .sec_traffic, .sec_swipe, .sec_sub_packet, .sec_TrafficManagement  {padding: 160px 0;}
/* .sec_operation p {margin-top: 36px;} */
.operation_img {display: block; padding: 120px 0 160px;}
.operation_img img {width: 100%; height: auto;}
.monitoring_box_wr .monitoring_box {display: block; margin-top: 10px; box-sizing: border-box;}
.monitoring_box ul {display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; box-sizing: border-box;}
.monitoring_box ul li {display: block; width: calc(16.66% - 1.32%); aspect-ratio: 1; margin-right: 1%; margin-bottom: 1%;}
.monitoring_box ul li:nth-of-type(6n) {margin-right: 0;}
.monitoring_box ul li p {font-size: 1.8rem; font-family: var(--font-kB); line-height: 1.6; color: var(--blue-color);text-align: center;}
.monitoring_box ul li img {display: block; width: auto; height: 40.26%; max-height: 96px; margin: 0 auto;}
.monitoring_box ul li .monitoring_box_item {display: flex; flex-direction: column; justify-content: space-between; background-color: white; box-shadow:rgb(80, 100, 174, .2)  0px 3px 20px; border-radius: 20px;  box-sizing: border-box; padding: 27.275% 0 18.185%; width: 100%; height: 100%;}


/* 차별화 */

.sec_scroll { position: relative ; display: block; background-color: black;}

.sec_scroll h2 {color: var(--white-color);}

.sec_scroll .scroll_wr { position: relative; display: block;}
.sec_scroll .inner {
    height: 100%;
    display: flex;
    align-items: start;
    justify-content: flex-end;
}

.sec_scroll .tit_fix_wr {
    position: sticky; 
    display: block; 
    box-sizing: border-box; 
    width: 437.17px; 
    z-index: 2; 
    top: 16rem;
    flex: 0 0 auto;
    margin-left: 0;
    margin-right: auto;
    /* margin-bottom: 430px; */
}

.sec_scroll .box_wr {
    position: relative;
    height: 100%;
    padding-top: 10px;
    max-width: 1120px;
}

.sec_scroll .box_inner_wr {
    height: 100%;
}


.sec_scroll .box_inner {
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    height: 100%;
}

.sec_scroll .box_inner ul {
    width: 100%;    
    overflow: hidden;
}

.sec_scroll .box_inner ul li {
    float: right;
    width: calc(50% - 80px);
    
}

.sec_scroll .box_inner ul li:nth-child(odd){
    padding-left: 80px;
}

.sec_scroll .box_inner ul li:nth-child(even){
    transform: translateY(25%);
    padding-right: 80px;
}

.sec_scroll .box_inner ul li + li {
    margin: 80px 0;
}

.sec_scroll .box_inner ul li:last-of-type {
    margin-bottom: 0;
}

.sec_scroll .box_inner ul li > div {
    position: relative;
    display: block;
}


.sec_scroll .box_inner ul li .box_img{
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    width: 480px;
    height: 480px;
    aspect-ratio: 1 / 1;

}

.sec_scroll ul li .box_img img {
    width: auto;
    height: 100%;
}

.sec_scroll ul li .box_front {
    text-align: left;
    margin-top: 40px;
}

.sec_scroll ul li .box_front span, 
.sec_scroll ul li .box_hover span {
    color: var(--green-color);
    font-size: 2rem;
    font-family: var(--font-kL);
}

.sec_scroll ul li .box_front p, 
.sec_scroll ul li .box_hover p {
    color: var(--white-color);
    font-size: 3.2rem;
    font-family: var(--font-kL);
    line-height: 1.6;
}
.sec_scroll ul li .box_hover p strong {
    color: #fff !important;
}

.sec_scroll ul li .box_hover > div {
    font-size: 2rem;
    color: var(--white-color);
    line-height: 1.6;
    margin-top: 38px;
}

.sec_scroll ul li .box_hover {
    position: absolute;
    inset: 0;
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: end;
    width: calc(100% - 80px);
    background: var(--black-color3);
    color: #fff;
    opacity: 0;
    padding: 40px;
    border-radius: 20px;
    transition: all 0.3s;
}

.sec_scroll ul li:hover .box_hover {
    opacity: 1;
}



/* 차별화 레퍼런스 */

.section2 .fp-overflow { position: relative; display: block; }
.section2 .container {height: 100%;display: flex;align-items: start;justify-content: flex-end;} 
.section2 .tit_wrap {position: fixed;width: 24.5rem;z-index: 2;margin-top: 9.5rem;text-align: left;left: calc(50% - 42.5rem);}
.section2 .tit_wrap .tit { margin: 2rem 0; }
.section2 .tit_wrap .txt { margin-bottom: 4.5rem; }
.section2.active::after { bottom: 0; }

/* MC_box2, 비즈니스 */
.MC_box2 {position: relative;height: 100%;padding-top: 9.5rem;width: 49rem;/* float: right; */}
.business { height: 100%; }
.business .inner { overflow-y: auto; overflow-x: hidden; position: relative; height: 100%; }
.business .inner::-webkit-scrollbar { display: none; -ms-overflow-style: none; scrollbar-width: none; }
.business ul {/* width: calc(100% + 4rem); */margin: 0 -2rem;overflow: hidden;} 
.business ul li { float: right; width: 50%; padding: 0 2rem; }
.business ul li:nth-child(even) { transform: translateY(11rem); }
.business ul li + li { margin: 2.5rem 0; }
.business ul li a { position: relative; display: block; }
.business ul li .img { width: 22.5rem; height: 23rem; overflow: hidden; border-radius: 0.5rem; text-align: center; background: rgba(0,0,0,0.1);}
.business ul li .img img { width: auto; height: 100%; }
.business ul li .txt_box { text-align: left; margin-top: 1.1rem;}
.business ul li .txt_box span { color: #666; font-size: 1rem; font-weight: 600;}
.business ul li .txt_box p { color: #111; font-size: 1.2rem; font-weight: 700;}
.business ul li .hover_box { position: absolute; top: 0; left: 0; text-align: left; display: flex; flex-wrap: wrap; flex-direction: column; justify-content: end; width: 100%; height: 23rem; background: rgba(0, 0, 0, 0.6); color: #fff; opacity: 0; padding: 2rem; font-size: 1.1rem; font-weight: 600; border-radius: 0.5rem; }
.business ul li .hover_box .tit { font-size: 1.1rem;}
.business ul li .hover_box .txt {display: block}
.business ul li .hover_box .txt ul {font-size: 0.8rem; font-weight: 300; padding: 0.2rem 2rem;}
.business ul li .hover_box .txt ul li {position: relative;padding-left: 0.7rem;float: none;width: 100%;}
.business ul li .hover_box .txt ul li:nth-child(even) { transform:none;}
.business ul li .hover_box .txt ul li + li { margin: 0;}
.business ul li .hover_box .txt ul li::before { content: ''; display: block; width: 3px; height: 3px ; left: 0; top: 0.55rem; border-radius: 50%; background: #fff; position: absolute;}

/* MC_box2, 비즈니스 - active */
.business ul li a:hover .hover_box { opacity: 1; }
.business ul li .hover_box { transition: all 0.3s; }



/* dashboard */

#site_Manager .sec_dashboard h2 {text-align: center; }
.sec_dashboard .dashboard_img {display: block; margin: 0 auto; width: fit-content; max-height: 960px;}
.sec_dashboard .dashboard_img img {width: 100%; height: auto;} 
.dashboard_img2 {display: block; margin: 0 auto; width: fit-content; max-height: 960px;}
.dashboard_img2 img {width: 100%; height: auto;} 


/* Manager 라인그래프 */
.sec_linegraph {padding-bottom: 80px;}

.sec_linegraph h5 {margin-bottom: 38px;}




/* Connection */
.sec_connection h5, .sec_traffic  h5  {
    margin-bottom: 38px;
}

.sec_connection table {
    width: 100%;
    border-collapse: collapse;
    font-family: "Noto Sans KR", sans-serif;
}
.sec_connection table thead {
    background-color: rgba(80,100,174,0.1);

}

.sec_connection table thead tr:first-of-type { 
    border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.sec_connection table thead tr:first-of-type th {
    border-top: 1px solid #000;
}



.sec_connection table thead th {
    border-left: 1px solid rgba(0, 0, 0, .12);
    padding: 12px 0;
    font-size: 1.4rem;
    font-weight: 500;
}

.sec_connection table thead th:first-of-type {
    border-left: none;
}

.sec_connection table tbody th:first-of-type {
    border-left: none;
}

.sec_connection table tbody th {
    border-left: 1px solid rgba(0, 0, 0, .12);
    border-top: 1px dashed rgba(0, 0, 0, .12);
    padding: 13px 0;
    font-size: 1.4rem;
}


.sec_connection table tbody tr:last-of-type th {
    border-bottom: 1px solid #000;
}

.sec_connection svg, .sec_traffic svg {margin-bottom: 80px;}



.accordion {margin: 80px 0 160px; position: relative; overflow: hidden;}
.accordion-item {position: relative;}
.accordion-item:last-of-type {margin-bottom: 10px;}
.accordion-item::before{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color:  black;}
.accordion-title {padding: 80px 40px;cursor: pointer;position: relative;display: flex;align-items: center;}
.txt {width: 90%;}
.accoIcon {width: 10%;text-align: right;}
.accoIcon img {transition: all 0.5s ease;}
.accordion-title h4 {font-size: 4.8rem;font-family: 'KIMM_Bold';margin-bottom: 20px;}
.accordion-title span {font-size: 2.4rem;line-height: 1.3;width: 80%;}
/* .accordion-title::after {content: "";position: absolute;top: 50%;right: 40px;width: 54px;height: 54px;background-repeat: no-repeat;background-size: contain;background-position: center;transform: translateY(-50%);border:1px solid red;} */

.accordion-panel {overflow: hidden; height: 0; }
.accordion-content {padding: 0 40px 40px;}
.accordion-content h5 {margin: 80px 0 40px;}
.accordion-content h5:nth-child(1) {margin-top: 0;}
.line-draw {position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background-color: #000;}
.line-draw:first-child{top: 0; bottom: auto;}

@media (max-width:1200px) {
    .accordion-title h4 {font-size: 4.0rem;}
    .accordion-title span {font-size: 2.0rem;}
    .accoIcon img {width: 48px;}
}



@media (max-width:980px) {
.accordion {margin: 40px 0 60px;}
.accordion-title {padding: 40px 20px;}
.accordion-title h4 {font-size: 3.2rem;margin-bottom: 10px;}
.accordion-title span {font-size: 1.6rem;}
.accordion-title::after {width: 36px;height: 36px;}
    .accoIcon img {width: 40px;}

.accordion-content {padding: 0 20px 40px;}
}



@media (max-width:780px) {
    .accoIcon img {width: 32px;}

}

@media (max-width:480px) {
.accordion-title {padding: 24px 16px;}
.accordion-title h4 {font-size: 2rem;margin-bottom: 5px;}
.accordion-title span {font-size: 1.2rem;}
/* .accordion-title::after {width: 24px;height: 24px;right:16px;} */
.accoIcon img {width: 24px;}
.accordion-content h5 {font-size: 1.6rem;}

}



/*================================== Subpage > Company ================================== */
#site_company .header {
    display: none;
}

body.scroll #site_company .header {
    background: white;
    backdrop-filter: none;
}

body.scroll #site_company .topnav a {color: #000;}
body.scroll #site_company .header .logo img {filter: invert(0);}


#site_company h2 {
    font-family: var(--font-kB);

}

.com_main {
    position: relative;
    padding-bottom: calc(16.816% + var(--head-height)) ;
}

.com_bg_wr {
    height: calc(100vh - 160px);
    padding: 8rem;
    transition: all .2s linear;

}

.com_bg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 20px;
    background-blend-mode: multiply;
}

.com_bg video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* min-width: 100%;
    min-height: 100%; */
    animation: scale 1s linear;
    object-fit: cover;
    object-position: center bottom;
}


.com_logo {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100%;
    right: 0;
    left: 0;
}

.com_logo img {
    display: block;
    position: sticky;
    top: 20%;
    margin: 0 auto;
    width: 30.703%;
    transform: scale(0.67);
}

.com_Tit {
    text-align: center;
    padding-top: 80px;
    
}

.com_Tit p {
    font-size: 3.2rem;
    font-family: var(--font-kL);
    line-height: 1.6;
    margin-top:36px ;
}


/* circle */

.com_circle {
    padding: 285px 0 160px 0;
}

.circle_wr {

}

.circle_wr ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.circle_wr ul li {
    position: relative;
    width: calc(20% - 1.82%);
    height: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.circle_wr ul li:not(:last-of-type){
    margin-right: 2.273%;
}

.circle_wr ul li::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    border: 2px dashed #5064AE;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    animation: rotate 15s linear infinite;
}

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}



.circle_txt {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: var(--font-kB);
}

.circle_txt div:first-of-type {
    font-size: 2.4rem;
    line-height: 1.6;
    color: var(--blue-color);

}
.circle_txt div:not(:first-of-type){
    font-size: 1.8rem;
    color: var(--black-color2);
    line-height: 1.6;
}

.com_about {
    padding-bottom: 16rem;
}

.about_wr {
    position: relative;
    width: 100%;


}

.about_wr img {
    width: 100%;
    border-radius: 20px;
    max-height: 480px;
    height: auto;
    object-fit: cover;
}

.about_con_wr {
    width: 100%;
    box-sizing: border-box;
    padding-top: 80px;

}

.about_con_wr::after{
    content: "";
    display: block;
    position: relative;
    clear: both;
}

.about_fl {
    float: left;
    width: 50%;

}

.com_about .about_fl h2 {text-align: start;}
.com_about .about_fl span {
    display: block; 
    font-size: 2.4rem; 
    font-family: var(--font-kL); 
    color: var(--blue-color); 
    text-align: start;
    margin-bottom: 21px;
}

.about_fr{
    float: right;
    width: 50%;
    font-size: 3.2rem;
}

.about_fr dl:not(:last-of-type) {margin-bottom: 40px;}

.about_fr dl dt, .about_fr dl dd{
    line-height: 1.6;
    word-break: keep-all;
} 

.about_fr dl dt {
    color: var(--black-color2);
    margin-bottom: 10px;
}


/* com_History */
.com_History {
    background-color: var(--blue-color);
    padding: 160px 0;
}

.com_History::after {
    content: "";
    display: block;
    clear: both;
}

.com_History .inner {
    position: relative;
    height: 100%;
    display: flex;
}

.com_History h2 {
    color: white;
    text-align: left;
}

.his_fl {
    float: left;
    position: sticky;
    top: 160px;
    width: 50%;
    height: 100%;
}

.his_fl p {
    font-size: 2.4rem;
    font-family: var(--font-kL);
    color: var(--green-color);
    margin-bottom: 20px;
}

.his_fr {
    float: right;
    width: 50%;
    position: relative;
}


.his_fr > ul > li {
    padding-left: 60px;
    position: relative;

}

.his_fr .road {
    display: block;
    position: absolute;
    left: 0;
    height: 100%;
    border-left: 2px solid white;
}

.his_fr .road {
    height: 0;
    top: var(--line-top);
}

.his_fr .road.road8 {
    height: 0;
    top:0;
}

.his_txt {
    display: flex;
    font-family: var(--font-kB);
    align-items: stretch;
}

.his_fr > ul > li:not(:last-of-type) .his_txt {
    padding-bottom: 160px;
}


.his_txt span {
    font-size: 4.8rem;
    color: var(--green-color);
    flex: 0 0 150px;
    padding-right: 40px;

}

.his_txt ul {
    /* padding-top: 13px; */
}

.his_txt ul li {
    font-size: 2.4rem;
    color: var(--white-color);
    line-height: 1.6;
}

.his_txt ul li:not(:last-of-type){
    margin-bottom: 30px;
}

.spot {
    position: absolute;
    left: 8px;
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 100%;
    top: 8px;
}


.line-circle {
    position: absolute;
    left: -20px;
    top: 5px;
    width: 40px;
    height: 40px;
    border: 1px solid white;
    border-radius: 100%;

}














/*====================================== 반응형 ====================================== */


@media (max-width:1800px) {
    .inner {
        width: 96%;
    }
}

@media (max-width:1700px) {
    

    /*================================== Subpage > T-Manager ================================== */

    .sec_scroll .box_inner ul li {}
    .sec_scroll .box_inner ul li + li{}
    .sec_scroll .box_inner ul li:nth-child(even){padding-right: 60px;}
    .sec_scroll .box_inner ul li:nth-child(odd){padding-left: 60px;}


}

@media (max-width:1600px) {
    

    /*================================== Subpage > T-Manager ================================== */

    .sec_scroll .box_inner ul li { width: calc(50% - 40px);}
    .sec_scroll .box_inner ul li + li{margin: 60px 0;}
    .sec_scroll .box_inner ul li:nth-child(even){padding-right: 20px;}
    .sec_scroll .box_inner ul li:nth-child(odd){padding-left: 20px;}
    .sec_scroll .box_inner ul li .box_img{width: 100%; height: 100%;}


}


@media (max-width:1500px) {

    .inner,
    .scrollbar_wrap {
        width: 96% !important;
        max-width: 100% !important;
    }

    .modal-dialog {
        margin: 1.75rem;
    }

    .tab_area {
        margin-top: 60px;
    }

    .tab_cont_txt .tab_box ul li {
        font-size: 2rem;
    }

    .tab_cont_txt .tab_box ul li::before {
        top: 8px;
    }


    .packet .packet_cont svg {
        width: 100%;
    }


    .sec_place .place_cont:last-child .place_title p  br{ display: none;} 
    .sec_place .place_title {width: 90%;}

    .sec_place .place_title p {
        white-space: normal;
        transition-delay: .3s;
    }

    .place_cont:hover .place_title p {        
        transition-delay: .3s;
    }
    .monitoring_box ul li p {font-size: 1.5rem; line-height: 1.5;}


}

@media (max-width:1385px) {
    .txt_area .sol_cont br {
        display: none;
    }

}

@media (max-width:1280px) {
    .tb_mb {display: block;}


    h2 {
        font-size: 4.8rem;
    }

    h3 {
        font-size: 3.2rem;
    }

    h5 {
        font-size: 2.8rem;
    }

    .sec_sol h4 {
        font-size: 4rem;
    }

    .sub_tit {
        font-size: 2.8rem;
        margin-top: 18px;
    }

    .txt_area .sol_cont {
        font-size: 1.8rem;
    }


    .txt_area .sol_cont .detail{
        font-size: 1.4rem;
    }


    .txt_area {
        padding: 5.7866% 4.5% 5.6439% 5.715%;
    }

    .txt_area .sol_cont br {
        display: block;
    }

    #packetModal h5 {margin-bottom: 20px;}
    #packetModal p {font-size: 1.8rem; margin-bottom: 20px;}
    #packetModal .modal-img {margin-bottom: 28px;}
    #packetModal .modal-img img {max-height: 280px;}


    /* country */

    .fixed_p {
        width: 147.469px;
    }

    .tab_cont .tit strong {
        font-size: 10rem;
    }

    .tab_cont_txt .tab_box ul li {
        font-size: 1.6rem;
        padding-left: 28px;
    }

    .tab_cont_txt .tab_box ul li::before {
        top: 5px;
    }

    .slick-slide {
        padding: 0 0.9%;
    }

    .sec_place h2 {
        margin-bottom: 80px;
    }

    .sec_place .place_title h5  {
        font-size: 2.8rem;
    }

    .place_cont:hover .place_title p {
        font-size: 1.8rem;
    }

    /*================================== Subpage > Bridge ================================== */
    .sec_swipe .sub_txt {
        margin: 60px 0;
    }

    .sec_sub_packet .sub_packet p {font-size: 2rem;}
    .bridge_tit_wrap > p {font-size: 2.4rem;}

    
    /*================================== Subpage > manager ================================== */
    
    .monitoring_box ul {}
    .monitoring_box ul li {width: calc(25% - 1.71%); margin-right: 2.273%; margin-bottom: 2.273%;}
    .monitoring_box ul li p {font-size: 1.3rem; line-height: 1.3;}
    .monitoring_box ul li:nth-of-type(6n) {margin-right: 2.273%;}
    .monitoring_box ul li:nth-of-type(4n) {margin-right: 0;}

    
    .sec_scroll .tit_fix_wr{ width: 360px;}
    .sec_scroll ul li .box_front p, .sec_scroll ul li .box_hover p {font-size: 2.8rem;}
    .sec_scroll ul li .box_front span, .sec_scroll ul li .box_hover span {font-size: 1.8rem;}
    .sec_scroll ul li .box_hover > div {font-size: 1.8rem;}
    .sec_scroll ul li .box_hover {}
    .sub_txt p {font-size: 1.8rem;}
    
    /*================================== Subpage > Company ================================== */
    
    .com_bg_wr {height: calc(100vh - 120px); padding: 6rem;}
    
    .about_fr {font-size: 2.4rem;}
    .com_main {padding-bottom: 21.3%;}
    .com_logo img {width: 34.703%;}
    .com_Tit {padding-top: 40px;}
    .com_Tit p {font-size: 2.4rem;}
    
    
    .circle_wr ul {justify-content: center;}
    .circle_wr ul li {width: calc(32.81% - 1.82%);}
    
    
    .his_txt ul li {font-size: 1.8rem;}
    .his_txt span {padding-right: 20px; font-size: 3.2rem; flex: 0 0 91px;}
    



}


@media (max-width:1200px) {
    .contact_cate dl {
        font-size: 1.8rem;
    }

    .transition {
        height: 40rem;
    }

    .tab_cont .tit br {
        display: block;
    }

    .txt_area .sol_cont {
        font-size: 1.6rem;
    }

    .txt_area .sol_cont .detail{
        font-size: 1.2rem;
    }


    .sol:last-of-type .txt_area .sol_cont br {
        display: none;
    }

    .sec_scroll .box_inner ul li {width: calc(50% - 30px);}
    .sec_scroll ul li .box_hover > div {font-size: 1.6rem; margin-top: 20px;}
    
}


@media (max-width:1100px) {
    .sec_scroll ul li .box_hover {padding: 20px; width: calc(100% - 40px);}
    .sec_scroll ul li .box_front p, .sec_scroll ul li .box_hover p {font-size: 2.4rem;}
    .sec_scroll ul li .box_front span, .sec_scroll ul li .box_hover span {font-size: 1.6rem;}
    .sec_scroll ul li .box_hover > div {font-size: 1.4rem;}
    
}


@media (max-width:1024px) {
    .sec_scroll .inner {flex-direction: column;}
    .sec_scroll .box_inner ul li {width: calc(50% - 20px);}

    .sec_scroll .tit_fix_wr {position: relative; top: 0; margin: 0;}
    .sec_scroll .box_wr {padding-top:79px ;}
    .sec_scroll .box_inner ul li:nth-child(odd){padding-left: 20px;}
    .sec_scroll .box_inner ul li:nth-child(even){padding-right: 20px;}

    .sec_dashboard .dashboard_img, .dashboard_img2 {width: 80%;}
    

}


@media (max-width:960px) {
    .txt_area .sol_cont {
        font-size: 1.6rem;
    }

    h1 {
        font-size: 9.6rem;
    }

    .main_txt p {
        font-size: 3.2rem;
    }

    .sec_cont .contact .txt_l {
        font-size: 2.4rem;
    }

    .topnav a {
        font-size: 1.6rem;
        animation: all 1s linear;
    }

    .topnav a:not(:last-child) {
        margin-right: 40px;
    }

    .cont_area {
        display: flex;
        flex-direction: column;
        margin-top: 78px;
    }

    .transition {
        height: 32rem;
    }

    .tab_cont .tit {
        text-align: center;
        margin-bottom: 32px;
    }

    .tab_area {
        margin-top: 0;
    }

    .tab_cont_txt {
        max-width: 100%;
    }

    .tab_wrap {
        justify-content: center;
    }

    .box_txt p {
        font-size: 2rem;
    }

    /* .sec_scroll h2 {font-size: 4rem;}
    .sec_scroll .tit_fix_wr {width: 300px;}
    .sec_scroll .box_inner ul li {width: calc(50% - 20px);}
    .sec_scroll .box_inner ul li + li {margin: 40px 0;}
    .sec_scroll .box_inner ul li:nth-child(odd) {padding-left: 10px;}
    .sec_scroll .box_inner ul li:nth-child(even) {padding-right: 10px;} */
}

@media (max-height:850px) {


    .box_txt span {
        font-size: 1.8rem;
    }

    .box_txt p {
        font-size: 1.6rem;
    }
}

@media (max-width:870px) {

    .sol:nth-of-type(1) .sol_cont br,
    .sol:nth-of-type(2) .sol_cont br,
    .sol:nth-of-type(3) .sol_cont br {
        display: none;
    }
}

@media (max-width:780px) {

    :root{
        --head-height:84px;
        --line-height:calc(100% - 24px);
        --line-top:24px;
    }

    .tb,
    .mb {
        display: block;
    }

    .pc {
        display: none;
    }

    .inner {
        width: calc(100% - 4rem) !important;
        padding: 0 2rem;
    }

    .nav ul {
        padding-top: 4rem;
        padding-bottom: 10rem;
    }

    .nav ul li a {
        padding: 30px 0;
    }

    .nav ul li a span {
        font-size: 4rem;
    }

    .nav img {filter: invert(0) !important;}

    .nav svg {
        fill: #000 !important;
    }

    h1 {
        font-size: 4.8rem;
    }

    h2 {
        font-size: 2.4rem;
        line-height: 1.4;
    }

    h3 {
        font-size: 2.4rem;
    }

    h5 {font-size: 2rem;}

    .nav .logo {
        width: 100%;
        margin-left: 0;
    }

    .logo {
        justify-content: flex-start;
        margin: 0;
    }

    .logo img {
        height: 32px;
        padding: 26px 0;
    }

    .btn {
        max-height: 56px;
        padding-top: 21.8px;
        padding-bottom: 17.2px;
    }

    .sec_img,
    .sec_bnf,
    .sec_place,
    .sec_country,
    .sec_model,
    .sec_txt {
        padding: 80px 0;
    }

    /* .sec_txt {padding: 40px 0;} */

    .sec_txt  h2 {margin-bottom: 0;}
    /* main */

    .main_txt p {
        font-size: 2rem;
        line-height: 28px;
        margin-top: 20px;
    }


    /* img */

    .sec_img .img_area {
        width: calc(100% + 20px);
        overflow-x: auto;
    }

    .sec_img .img_area::-webkit-scrollbar {display: none;}

    .sec_img .img_area img {
        width: 733px;
        height: auto;
        padding-right: 20px;
    }


    .sec_packet {
        padding: 80px 0 0 0;
    }

    .packet_cont {
        position: relative;
        right: 0;
    }

    .packet .packet_cont svg {
        width: 780px;
        position: relative;

    }

    .packet p {
        font-size: 1.6rem;
        padding-bottom: 26.5px;
    }

    .packet_btn {

    }
    .packet_btn button {
        font-size: 1.4rem;
        border-radius:20px;
        padding:10px 20px;
    }


    .transition {
        height: 16rem;
    }


    #packetModal p {font-size: 1.6rem;}

    /* solution */

    .sec_sol {
        padding-bottom: 80px;
        padding-top: 0;
    }

    .sol {
        position: relative;
        height: 100%;
        bottom: 0 !important;
        margin-bottom: 20px !important;
        margin-top: 0 !important;
        box-shadow: none;
        top: auto !important;
    }

    .sol::after {
        content: none;
    }

    .sol_list {
        margin: 0;
        padding: 0;
    }

    .sec_sol h2 {
        margin-bottom: 40px;
    }

    .sec_sol h4 {
        font-size: 2rem;
        line-height: 1.35;
    }

    .sec_sol h4 br {
        display: block;
    }
    .sol:nth-child(1) {
        box-shadow: none;
    }

    .sol:nth-child(1) .txt_area .sol_cont {
        margin-top: 63px;
    }

    .sol_cont_wrap {
        position: relative;
        flex-direction: column;
    }

    .txt_area {
        width: auto;
        height: auto;
        padding: 40px;
    }

    .sec_sol .img_area {
        width: 100%;
        height: 160px;
        border-radius: 0 0 20px 20px;
    }

    .sub_tit {
        font-size: 1.6rem;
        margin-top: 8px;
    }

    .txt_area .sol_cont {
        font-size: 1.4rem;
        margin-top: 40px;
    }

    /* .txt_area {padding: 5.7866% 4.5% 5.6439% 5.715%;} */
    .sol:nth-of-type(1) .sol_cont br,
    .sol:nth-of-type(2) .sol_cont br,
    .sol:nth-of-type(3) .sol_cont br {
        display: block;
    }


    .sec_sol .img_area img {
        height: auto;
        position: relative;
        bottom: 50%;
        object-position: center center;
    }



    /* benefit  */
    .sec_bnf .inner {
        width: calc(100% - 4rem) !important;

    }
    
    .horizontal {
        transform: translate(0, 0) !important;
    }

    .sec_bnf h2 {
        margin-bottom: 40px;
    }

    .sec_bnf .sticky {
        padding: 0;
        position: relative;
        top: auto;
    }

    .bnf_scroll_wrap {
        height: 100%;
    }

    .bnf_cont {
        padding: 0;
    }

    .bnf_cont:first-child {
        margin: 0;
        padding: 0;
    }

    .bnf_cont:not(:last-child) {
        margin-bottom: 40px;
    }

    .bnf_cont:not:nth-of-type(4) {
        margin: 0;
    }

    .horizontal {
        flex-direction: column;
        height: 100%;
    }

    .bnf_img {
        width: fit-content;
        height: auto;
        padding-bottom: 57px;
    }

    .bnf_img img {
        width: calc(100% - 30px);
    }

    .box_txt_wrap {
        bottom: 0;
        right: 0;
    }

    .box_txt {
        padding: 20px 40px 20px 20px;
        max-width: 310px;
        margin-left: 40px;
    }

    .box_txt p {
        font-size: 1.4rem;
    }

    /* .box_txt p br {display: none;} */


    /* place */

    .sec_place h2 {
        margin-bottom: 31px;
        line-height: 1.6;
    }

    .sec_place h2 br {
        display: block;
    }

    .place_conts {
        height: auto;
        flex-direction: column;
    }

    .place_cont {
        height: 160px;
        flex: initial;
        transition: height 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .place_cont:hover {
        flex: initial;
        height: 280px;
        transition: height 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }

    .sec_place .place_title h5 {
        font-size: 2.4rem;
        text-align: center;
    }

    .sec_place .place_title p {
        transition: opacity, margin 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }


    .place_cont:hover .place_title p {
        font-size: 1.4rem;
        transition: opacity, margin 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }


    /* country */

    .sec_country h2 {
        text-align: center;
        justify-content: center;
    }

    .fixed_p {
        width: 73.734px;
    }

    .sec_country h2 br:not(:nth-of-type(2)) {
        display: block;
    }

    .sec_country .counter {
        position: relative;
        width: 100%;
    }

    .sec_country .ht1 {
        width: 100%;
    }

    .sec_country .last {
        width: 100%;
    }

    .tab_area {
        margin-top: 0;
    }

    .tab_cont .tit strong {
        font-size: 8rem;
    }

    .tab_cont .tit br {
        display: block;
    }

    .tab_cont_txt .tab_box {
        margin-top: 40px;
        padding: 20px;
    }

    .tab_cont_txt .tab_box ul li {
        font-size: 1.4rem;
        padding-left: 22px;
    }

    .tab_cont_txt .tab_box ul li::before {
        top: 4px;
    }

    .tab_cont_txt .tab_box ul li:not(:last-of-type) {
        margin-bottom: 18px;
    }

    .tab_map_area {
        margin: 0;
    }

    /* model */
    .sec_model h3 {
        margin-bottom: 39px;
    }

    .slick-slider {
        width: 100%;
        min-height: 175px;
    }

    .slick-slide img {
        width: 100%;
    }

    .slick-slide {
        padding: 0 0px;
    }

    .all_btn .btn {
        margin-top: 40px;
        padding-bottom: 21.8px !important;
        max-height: 100%;
    }

    .modal-content {
        max-height: 90vh;
    }

    .modal-header {
        padding: 2rem;
    }

    .product thead th {
        padding: 20px 0;
        font-size: 1.4rem;
    }

    .modal-body {
        padding: 2rem;
        padding-top: 0;
        overflow: auto;
    }


    /* contact */
    .sec_cont {}

    .sec_cont .contact {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 80px 0;
        border-bottom: 1px solid rgb(255, 255, 255, 0.38);
        gap: 39px;
    }

    .sec_cont .contact .txt_l {
        font-size: 2rem;
        text-align: center;
    }

    .sec_cont .contact .btn_area {
        width: 100%;
    }

    .btn {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100%;
        max-width: 100%;
        font-size: 1.6rem;
        line-height: 1.314;
    }

    /* footer */

    .footer {
        padding: 8rem 0;
    }

    .footer .about .f_logo {
        width: auto;
    }

    .footer .f_about {
        width: 100%;
        padding-top: 39px;
    }

    .footer .about {
        flex-direction: column;
    }

    .address,
    .tel {
        font-size: 1.6rem;
    }

    .address {
        line-height: 2.6rem;
        padding-bottom: 19px;
    }

    .copyright {
        padding-top: 39px;
        font-size: 1.2rem;
    }

    /* ========================================== contactus ========================================== */

    #site_contact .sec_contact1 {
        padding: 7.7rem 0 8rem 0;
    }

    #site_contact .sec_contact2 {
        padding: 8rem 0 8rem 0;
    }

    .contact_logo {}

    .sec_contact1 .contact_logo {
        padding: 70px 0;
    }

    .contact_com {
        flex: 0 0 100%;
        width: 100%;
    }

    .contact_tit {
        font-size: 2rem;
        padding-bottom: 19px !important;
    }

    .contact_subtit {
        font-size: 1.2rem;
        padding: 0;
        padding-bottom: 10px;
    }

    .contact_area {
        flex-direction: column;
    }

    .contact_cate {
        display: flex;
        flex-direction: column;
    }

    .contact_cate dl {
        font-size: 1.4rem;
    }

    .contact_cate dl:not(:last-of-type) {
        padding-bottom: 9px;
    }

    /* .contact_cate dl:not(:last-of-type){padding-bottom: 10px;} */
    .contact_cate dt {}

    .contact_cate dd {}

    .outlink.map {
        padding-top: 9px;
    }

    .outlink.go {
        padding-top: 9px;
    }

    .outlink {
        display: block;
    }

    .outlink span {
        font-size: 1.4rem;
        margin-bottom: 2px;
    }

    .outlink img {
        width: 12px;
        height: 12px;
    }

    .sec_contact2 .contact_logo_wrap {
        padding: 0;
        margin-bottom: 40px;
    }

    .sec_contact1 .contact_logo {
        margin: 40px 0;
    }

    .sec_contact2 #salesparter1 {
        margin: 40px 0 50px 0;
    }

    .sec_contact2 #salesparter1 .contact_logo {
        padding: 70px 0;
    }

    .sec_contact2 #salesparter2 .contact_logo {
        padding: 77px 0 78px 0;
    }

    .sec_contact1 .contact_logo img {
        height: 60px;
    }

    .sec_contact2 #salesparter1 .contact_logo img {
        height: 60px;
    }

    .sec_contact2 #salesparter2 .contact_logo img {
        height: 45px;
    }

    .contact_cate dt,
    .contact_cate dd {
        line-height: 30px;
    }

    .email {
        flex-direction: column;
    }

    .email .gray {
        color: rgba(0, 0, 0, 0.38)
    }

    .contact_cate dd .email:nth-of-type(2) {
        padding-top: 9px;
    }

    .modal-dialog {
        min-height: calc(100% - 3.5rem);
    }

    .modal-dialog::before {
        height: calc(100vh - 3.5rem);
    }

    .modal-wrap .modal .modal-content {}

/*================================== Subpage > bridge ================================== */

.divider {width: calc(100% - 4rem); max-width: 100%;}

.sec_swipe .sub_txt {margin: 39px 0;}
.sub_txt p+p {margin-top: 19px !important;}

.monitor {width: calc(100% - 4rem); margin: 0 20px; }
.monitor img {width: 100%; margin: 0;}


.sec_swipe h5 {margin-top: 80px; margin-bottom: 19px;}
.rate_wr {display: block; overflow-x: auto; padding-bottom: 20px;}
.rate_wr img {width: auto; height: 200px;}

.swipe_wr .slick-slide.slick-active.slick-center {transform: scale(1);}

/*================================== Subpage > manager ================================== */

.sec_operation, .sec_dashboard, .sec_connection, .sec_scroll, .sec_traffic, .sec_swipe, .sec_sub_packet, .sec_TrafficManagement {padding: 80px 0;}

.sec_operation h2 {margin-bottom: 40px;}
.operation_img {padding: 47px 0 80px 0;}
.operation_img img {width: 58.1%; margin: 0 auto;}
.monitoring_box ul li {width:calc(50% - 5px); margin-right: 10px; margin-bottom: 10px;}
.monitoring_box ul li:nth-of-type(4n) {margin-right: 10px;}
.monitoring_box ul li:nth-of-type(2n) {margin-right: 0;}
.monitoring_box ul li .monitoring_box_item {padding: 24.12% 0 11.18%;}
.monitoring_box_wr .monitoring_box {margin-top: 19px;}

.monitoring_box ul li p {font-size: 1.4rem; line-height: 1.6;}


/* sec_scroll */
.sec_scroll .scroll_wr {}
.sec_scroll .inner {display: block;}
.sec_scroll .tit_fix_wr {position: relative; width: 100%; top: 0; margin: 0;}
.sec_scroll .box_wr {padding-top: 79px; max-width: 100%;}
.sec_scroll .box_inner ul li {width: 100%; float: none;}
.sec_scroll .box_inner ul li:nth-child(odd) {padding: 0;}
.sec_scroll .box_inner ul li:nth-child(even) {padding: 0; transform: none;}
.sec_scroll .box_inner ul li .box_img {width: 100%; height: auto;}
.sec_scroll ul li .box_hover {padding: 20px; width: calc(100% - 40px);}
.sec_scroll ul li .box_front p, .sec_scroll ul li .box_hover p {font-size: 2.4rem;}
.sec_scroll ul li .box_front span, .sec_scroll ul li .box_hover span {font-size: 1.6rem; line-height: 1.6;}

.sec_scroll ul li .box_hover p strong {
    color: #fff !important;
}

.sec_scroll ul li .box_hover > div {
    font-size: 1.4rem;
    margin-top: 10px;
}

.connection_table {overflow-x: auto; position: relative; padding-bottom: 20px;}
.sec_connection table {white-space: nowrap;}
.sec_connection table thead th {font-size: 1rem; padding: 15.5px 16px;}
.sec_connection table tbody th {font-size: 1rem; padding: 17px 21px;}
.sec_connection table tbody th:nth-of-type(4) {font-size: 1rem; padding: 17px 6px;}
/* 가로 스크롤바 */
/* 가로 스크롤바 */
.connection_table::-webkit-scrollbar, .rate_wr::-webkit-scrollbar {
    height: 3px; /* 스크롤바의 높이 */
    background-color: #000; /* 스크롤바의 배경색 */
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

/* 가로 스크롤바 Thumb */
/* 가로 스크롤바 Thumb */
.connection_table::-webkit-scrollbar-thumb, .rate_wr::-webkit-scrollbar-thumb {
    background-color: #000; /* 스크롤바 Thumb의 배경색 */
    border: 3px solid black; /* 스크롤바 Thumb의 테두리 */
    border-radius: 0; /* 스크롤바 Thumb의 모서리 반경 */
}

.sec_connection h5, .sec_traffic h5 {margin-bottom: 20px;}
.sec_connection svg {margin-bottom: 80px;}

.sec_traffic h2, .sec_connection h2 {margin-bottom: 40px;}
/*================================== Subpage > Company ================================== */

body.scroll #site_company .header .menu svg {filter: invert(0);}


/* com_main */
.com_main {padding-bottom: 75%;}
.com_logo img {width: 80%;}

/* com_Tit */
.com_Tit h2 {font-size: 3.2rem;}
.com_Tit p {color: var(--black-color2); font-size: 1.6rem;}


/* com_circle */
.com_circle {padding: 80px 0 0 0;}




/* com_about */
.com_about {padding: 80px 0;}
.com_about .about_fl span {font-size: 1.6rem; margin-bottom: 10px;} 
.about_fl {float: none; width: 100%; margin-bottom: 40px;}
.about_fr {float: none; width: 100%; font-size: 1.6rem;}
.about_fr dl:not(:last-of-type) {margin-bottom: 20px;}
.about_con_wr {padding-top: 41px;}


.com_bg_wr {height:calc(90vh - 4rem) ; padding: 2rem;}
.com_History {padding: 80px 0;}
.com_History .inner {display: block;}
.his_fl {position: relative; float: none; top: 0; width: 100%; margin-bottom: 45px;}
.his_fl p {font-size: 1.6rem; margin-bottom: 10px;}
.his_fr {width: calc(100% - 10px); left: 10px; float: none;}
.his_fr > ul > li {padding-left: 32px;}
.his_txt {flex-direction: column;}
.his_txt span {font-size: 2.4rem; flex: 0 0 auto;}
.line-circle {width: 22px; height: 22px; top: 0; left: -10.5px;}
.spot {width: 14.4px; height: 14.4px; top: 4px; left: 4px;}
.his_txt ul {padding-top: 19px;}
.his_txt ul li {font-size: 1.4rem;}
.his_fr > ul > li:not(:last-of-type) .his_txt {padding-bottom: 80px;}
.his_fr .road {height: 0; top:var(--line-top);}
.his_fr .road.road8 { height: 0; top:0;}

/*================================== Subpage > Tbridge ================================== */


.com_logo img {top: 160px;}
.sub_txt p {font-size: 1.4rem; }



.sec_swipe .swipe_wr {
    top: 11%;
}

.sec_swipe .slick-slider {
    width: 100%;
    min-height: 150px;
}




/* sec_sub_packet */
.sec_sub_packet {}
.sec_sub_packet .sub_packet + .sub_packet {margin-top: 40px;}
.sec_sub_packet .sub_packet p {font-size: 2rem; margin-bottom: 30px;}
.sec_sub_packet .sub_txt p+p {margin-top: 19px !important;}
.bridge_tit_wrap {margin-bottom: 80px;}
.bridge_tit_wrap > p {font-size: 2rem; line-height: 1.6;margin-bottom: 20px;}
.bridge_tit_wrap > h2 {margin-bottom: 39px;}



    .circle_wr svg {
        width: 100%;
        height: auto;
        margin-bottom: 16px;
    }

    .circle_wr svg >g >g {
        animation: dash 80s linear infinite;
        animation-direction: reverse;
    }

    @keyframes dash {
        100% {
            stroke-dashoffset: 1000;
        }
        
    }
}

@media (max-width:425px) {
    .bnf_cont:nth-of-type(3) .box_txt p br {
        display: none;
    }

    .box_txt {
        padding: 20px 30px 20px 20px;
    }

    .box_txt span {
        font-size: 1.4rem;
    }

    .box_txt p {
        font-size: 1.2rem;
    }

    .monitoring_box ul li img {height: 48px;}

}

@media (max-width:450px) {

    .sol:nth-of-type(1) .sol_cont br,
    .sol:nth-of-type(2) .sol_cont br,
    .sol:nth-of-type(3) .sol_cont br {
        display: none !important;
    }

    .txt_area .sol_cont br {
        display: none !important;
    }

    .sec_sol .img_area img {
        bottom: 20%;
    }

    .monitoring_box ul li p {font-size: 1.2rem;}

}