@import url("https://cdn.jsdelivr.net/gh/poposnail61/min-sans@main/web/css/minsans-dynamic-subset.css");




/* CSS로 비디오 위 버튼 완전 제거 */
video::-webkit-media-controls,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button,
video::-webkit-media-controls-overlay-play-button {
  display: none !important;
}
video.video-ready {
  display: block;
}

*{
    margin: 0;
    padding: 0;
    color: #ffffff;
    box-sizing: border-box;
    font-family:  'MinSans', 'MinSans';
    list-style: none;
    font-style: normal;       /* 이탤릭 제거 */
    font-weight: 100;      /* 굵기 초기화 */
    text-decoration: none;    /* 밑줄, 취소선 제거 */
    font-variant: normal;     /* small-caps 등 제거 */
    letter-spacing: normal;
    line-height: 1.6em;
    text-transform: none;     /* 대문자/소문자 변환 제거 */
    transition: all 0.5s ease;
    overflow-x: hidden; 
    overflow-wrap: normal;
    word-break: keep-all;   
}



/* 전체 페이지 스크롤은 가능하게, 스크롤바는 안 보이게 */
html {
  overflow: auto;
}

/* Chrome, Safari, Edge(웹킷 계열) */
html::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

/* Firefox */
html {
  scrollbar-width: none;
}

/* IE, Edge 구버전 */
html {
  -ms-overflow-style: none;
}
section {
  height: calc(var(--vh) * 100);          /* 화면 전체 높이 */
  scroll-snap-align: start; /* 스냅 위치 */
}
html {
  scroll-behavior: smooth;
}
h1{
    font-size: 180px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 중앙 정렬 */
}
h2{
    font-size: 52px;
}
h3{
    font-size: 40px;
}
h4{
    font-size: 25px;
}
h5{
    font-size: 16px;
}
em{
    font-weight: 700;
}
strong{
    font-weight: 700;
    color: #00CFCF;
}
video{
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 중앙 정렬 */
  width: 100%;
  height: 101%;
  object-fit: cover;
  vertical-align: top;
  z-index: -2;
}
.video_ready_img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 중앙 정렬 */
  width: 100%;
  height: 101%;
  object-fit: cover;
  vertical-align: top;
  z-index: -2;
}
body {
  overscroll-behavior: none; /* 모바일 스크롤막기 */
  touch-action: none;
  user-select: none; /* 텍스트 드래그 금지 */
  -webkit-tap-highlight-color: transparent; /* iOS/Android 터치 하이라이트 제거 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.content {
  opacity: 0;
  visibility: hidden; /* 안보이게 */
  transition: opacity 2s ease;
}

.content.show {
  opacity: 1;
  visibility: visible; /* 보이게 */
}
/* 기본속성 end */
/* 기본속성 end */
/* 기본속성 end */
/* 기본속성 end */

/* 클릭/터치 모션 원 */
.click-circle {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 204, 255, 0.5); /* 파란색 */
  border-radius: 50%;
  pointer-events: none; /* 클릭 방해 안 함 */
  transform: scale(0);
  opacity: 1;
  transition: transform 0.5s ease, opacity 0.5s ease;
  z-index: 9999;
}

.click-circle.show {
  transform: scale(1.5);
  opacity: 0;
}


/* --------------------------GNB----------------------------------------- */
.gnb_w .copyright{
    display: none;
}
.gnb_b .copyright{
    display: none;
}
.gnb_m_c{
    display: none;
}
.gnb_m{
    display: none;
}
.gnb_w{
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 99;
}
.gnb_w ol{
    display: flex;
    padding: 0 100px;
    margin: 0;
    width: 100%;
}
.gnb_w li{
    margin-right: 60px;
    line-height: 80px;
    opacity: 0.4;
    cursor: pointer;
}
.gnb_w li a{
    font-size: 18px;
    font-weight: 500;
}
.gnb_w li:hover{
    opacity: 1;
}
.gnb_w li:last-child {
  margin-left: auto;
  margin-right: 0;
}
.gnb_w .gnb_active{
    opacity: 1;
} 

.gnb_b{
    position: fixed;
    width: 100%;
    height: 80px;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 99;
}
.gnb_b ol{
    display: flex;
    padding: 0 100px;
    margin: 0;
    width: 100%;
}
.gnb_b li{
    margin-right: 60px;
    line-height: 80px;
    opacity: 0.4;
    cursor: pointer;
}
.gnb_b li a{
    color: #002E6A;
    font-size: 18px;
    font-weight: 500;
}
.gnb_b li:hover{
    opacity: 1;
}
.gnb_b li:last-child {
  margin-left: auto;
  margin-right: 0;
}
.gnb_b .gnb_active{
    opacity: 1;
} 






.ly_main{
    width: 100%;
    height: calc(var(--vh) * 100);
    position: relative;
    overflow: hidden;
}
.mainbanner:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.bl_txt{
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 1200px;
    /* border: 1px solid red; */
}
.maintxt h2{
    font-size: 60px;
}





.insightsbanner:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: -1;
}
.insightstxt h2{
    margin-bottom: 30px;
}
.insightstxt{
    min-height: 290px;
}



/* --------------------Flexibility -------------------------*/
.Flexibilitybanner:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(5, 11, 37, 0.6);
  backdrop-filter: blur(4px);   /* 배경 흐림 */
  -webkit-backdrop-filter: blur(4px); /* 사파리용 */
  z-index: -1;
}
.Flexibilitytxt{
    text-align: left;
}
.Flexibilitytxt h2{
    margin-bottom: 30px;
}
.Flexibilitytxt li strong{
    font-weight: 200;
}

ul.custom-list {
  list-style: none; /* 기본 불릿 제거 */
  padding-left: 10px; 
}

ul.custom-list li {
  position: relative;  /* ::before 기준 */
  margin-bottom: 30px;
  padding-left: 18px;  /* 박스 공간 확보 */
}

ul.custom-list li::before {
  content: "";
  position: absolute;  /* 텍스트 첫 줄 기준으로 박스 고정 */
  top: 15px;              /* 첫 줄 맨 위 */
  left: 0;
  width: 8px;
  height: 8px;
  border: 1px solid #ffffff;
  box-sizing: border-box; 
}
.fb_box{
    display: flex;      
    width: 100%;       
    gap: 50px;   
    align-items: center;
}
.fb_video{
    display: flex;   
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    position: relative;
    width: 100%;
    max-width: 700px;
    height: 100%;
    max-height: 918px;
    flex: 1; 
    overflow: hidden;
}
.fb_video video{
    border-radius: 30px;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.fb_video img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fb_txt{
    position: relative;
    flex: 1.2;    
}




/* --------------------Conveniencey -------------------------*/
.Conveniencebanner:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(5, 31, 37, 0.9);
  backdrop-filter: blur(10px);   /* 배경 흐림 */
  -webkit-backdrop-filter: blur(10px); /* 사파리용 */
  z-index: -1;
}
.Convenienceytxt h2{
    margin-bottom: 40px;
}
.Convenienceytxt ul{
    display: flex;      /* 가로 정렬 */
    width: 100%;        /* 상위 박스 유동 */
    gap: 40px;          /* 박스 사이 간격 */
}
.Convenienceytxt ul li{
    position: relative;
    padding: 30px;
    flex: 1;            /* 4개 박스 균등 분배 */
    height: 500px;
    border: 1px solid #fff;
    border-radius: 15px;
    text-align: left;
}
.Convenienceytxt ul li::before {
  content: "";
  position: absolute;  /* 텍스트 첫 줄 기준으로 박스 고정 */
  top: 15px;              /* 첫 줄 맨 위 */
  left: 50%;
  transform: translate(-50%, 0);
  width: 10px;
  height: 10px;
  border-radius: 20px;
  border: 1px solid #ffffff;
  box-sizing: border-box; 
}
.Convenienceytxt ul li div{
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: 65px;
    height: 65px;
    
}
.Convenienceytxt ul li:nth-child(1) div{background: center/cover no-repeat url(../image/icon_cv_01_off.png);}
.Convenienceytxt ul li:nth-child(2) div{background: center/cover no-repeat url(../image/icon_cv_02_off.png);}
.Convenienceytxt ul li:nth-child(3) div{background: center/cover no-repeat url(../image/icon_cv_03_off.png);}
.Convenienceytxt ul li:nth-child(4) div{background: center/cover no-repeat url(../image/icon_cv_04_off.png);}
.Convenienceytxt ul li h4{
    padding-top: 15px;
    font-size: 23px;
}
.Convenienceytxt ul li:hover{
    border: 1px solid #00CFCF;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);   /* 배경 흐림 */
    -webkit-backdrop-filter: blur(20px); /* 사파리용 */
}
.Convenienceytxt ul li:hover::before {
    border: 1px solid #00CFCF;
}
.Convenienceytxt ul li:hover h4{
    color: #00CFCF;
}
.Convenienceytxt ul li:nth-child(1):hover div{background: center/cover no-repeat url(../image/icon_cv_01_on.png);}
.Convenienceytxt ul li:nth-child(2):hover div{background: center/cover no-repeat url(../image/icon_cv_02_on.png);}
.Convenienceytxt ul li:nth-child(3):hover div{background: center/cover no-repeat url(../image/icon_cv_03_on.png);}
.Convenienceytxt ul li:nth-child(4):hover div{background: center/cover no-repeat url(../image/icon_cv_04_on.png);}




/* --------------------specifications -------------------------*/
.specificationsbanner h1{
    color: #002E6A;
}
.specificationsbanner h2{
    margin-bottom: 40px;
}
.specificationsbanner{
    background-color: white;
}
.specificationsbanner ul{
    display: flex;      /* 가로 정렬 */
    width: 100%;        /* 상위 박스 유동 */
    gap: 60px;          /* 박스 사이 간격 */
    align-items: center;
}
.specificationsbanner ul li{
    position: relative;
    flex: 1;           
    height: auto;
}
.specificationsbanner ul li:nth-child(2){
    flex: 1.7;           
}
.specificationsbanner ul li img{
    width: 100%;
    max-width: 490px;
    /* background-color: #00CFCF; */
}
.specificationsbanner ul li h2 strong{
    color: #002E6A;
    text-align: left;
}
.specificationsbanner ul li tr td{
    color: #002E6A;
    font-weight: 500;
    text-align: left;
}
.specificationsbanner ul li tr td:nth-child(2){
    color: #00CFCF;
    font-weight: 300;
}
.specificationsbanner table{
    width: 100%;
    max-width: 800px;
    border: 2px solid #002E6A;
    border-left: none;
    border-right: none;
    border-collapse: collapse;
    /* background-color: aqua; */
}
.specificationsbanner table td{
    border: 1px solid #CCCCCC;
    border-left: none;
    border-right: 10px solid #fff;
    height: 68px;
}








/* 문의하기 */
.contactbanner h1{
    color: #002E6A;
    white-space: nowrap;
}
.contactbanner h2{
    margin-bottom: 20px;
}
.contactbanner{
    background-color: white;
}
.contactbanner strong{
    color: #002E6A;
}
.contactbanner label{
    float: left;
    display: block;
    color: #002E6A;
    font-weight: 500;
    line-height: 60px;
    width: 130px;
    text-align: left;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
    margin-right: 10px;

}
.contactbanner .submitform{
    border-bottom: 2px solid #002E6A;
}
.contactbanner .form-group{
    height: 64px;
    border-collapse: collapse;
}
.contactbanner .contact{
    border-top: 2px solid #002E6A;
    border-collapse: collapse;
}
.contactbanner .messageform{
    height: 240px;
}
.contactbanner .messageform label{
    height: 240px;
    border: none;
}
.contactbanner select, option{
    width: calc(100% - 140px);
    display: block;
    line-height: 60px;
    height: 61px;
    font-size: 16px;
    font-weight: 300;
    color: #002E6A;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
}
.contactbanner input{
    display: block;
    color: #002E6A;
    font-weight: 300;
    line-height: 60px;
    width: calc(100% - 140px);
    text-align: left;
    border: none;
    font-size: 16px;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
}
.contactbanner input::placeholder {
    font-size: 16px;
    font-weight:300;
    color: #B1B1B1;
    
}
.contactbanner textarea::placeholder {
    font-size: 16px;
    font-weight: 300;
    color: #B1B1B1;
    
}
.contactbanner textarea {
    padding-top: 16px;
    width: calc(100% - 140px);
    height: calc(100% - 8px);
    font-size: 16px;
    font-weight: 300;
    color: #002E6A;
    border: none;
}
.contactbanner textarea:focus{
    border: none;
    outline: none;
}
.contactbanner h5{
    margin-top: 10px;
    color: #B1B1B1;
    font-size: 14px;
    font-weight: 200;
    text-align: left;
}
.contactbanner h5 a{
    margin-top: 10px;
    color: #002E6A;
    font-size: 14px;
    font-weight: 200;
    text-align: left;
    text-decoration: underline;
}
.contactbanner button{
    margin-top: 40px;
    font-size: 16px;
    font-weight: 400;
    width: 180px;
    height: 55px;
    background-color: #002E6A;
    border: none;
    cursor: pointer;
}

.copyright{
    width: 100%;
    display: block;
    position: absolute;
    bottom: 20px;
}
.copyright h5{
    font-size: 13px;
    text-align: center;
}


@media (max-height: 1050px) {
.contactbanner .messageform{
    height: 200px;
}
.contactbanner .messageform label{
    height: 200px;
    border: none;
}

.contactbanner button{
    float: right;
    margin-top: -40px;
    font-size: 16px;
    font-weight: 400;
    width: 180px;
    height: 55px;
    background-color: #002E6A;
    border: none;
    cursor: pointer;
}


}


@media (max-width: 1600px) {
h1{
    font-size: 120px;
}
h2{
    font-size: 42px;
}
h3{
    font-size: 30px;
}
h4{
    font-size: 18px;
}
h5{
    font-size: 14px;
}
em{
    font-weight: 700;
}
.bl_txt{
    max-width: 1000px;
}

.insightstxt{
    min-height: 200px;
}
.fb_txt{
    flex: 1.6;    
}



/* --------------------------GNB----------------------------------------- */
.gnb_w{
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 99;
}
.gnb_w ol{
    display: flex;
    padding: 0 60px;
    margin: 0;
    width: 100%;
}
.gnb_w li{
    margin-right: 40px;
    line-height: 60px;
    opacity: 0.4;
    cursor: pointer;
}
.gnb_w li a{
    font-size: 16px;
    font-weight: 500;
}
.gnb_w li:hover{
    opacity: 1;
}
.gnb_w li:last-child {
  margin-left: auto;
  margin-right: 0;
}
.gnb_w .gnb_active{
    opacity: 1;
} 

.gnb_b{
    position: fixed;
    width: 100%;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 99;
}
.gnb_b ol{
    display: flex;
    padding: 0 60px;
    margin: 0;
    width: 100%;
}
.gnb_b li{
    margin-right: 40px;
    line-height: 60px;
    opacity: 0.4;
    cursor: pointer;
}
.gnb_b li a{
    color: #002E6A;
    font-size: 16px;
    font-weight: 500;
}
.gnb_b li:hover{
    opacity: 1;
}
.gnb_b li:last-child {
  margin-left: auto;
  margin-right: 0;
}
.gnb_b .gnb_active{
    opacity: 1;
} 






.Convenienceytxt ul li{
    padding: 20px;
    height: 50vh;
    max-height: 450px;
}
.Convenienceytxt ul li div{
    left: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    
}

.Convenienceytxt ul li h4{
    padding-top: 15px;
    font-size: 18px;
}

/* --------------------Flexibility -------------------------*/

ul.custom-list li::before {
  top: 10px;              /* 첫 줄 맨 위 */
}


/* --------------------specifications -------------------------*/
.specificationsbanner h2{
    margin-bottom: 40px;
}
.specificationsbanner{
    background-color: white;
}
.specificationsbanner ul{
    display: flex;      /* 가로 정렬 */
    width: 100%;        /* 상위 박스 유동 */
    gap: 60px;          /* 박스 사이 간격 */
    align-items: center;
}
.specificationsbanner ul li{
    position: relative;
    flex: 1;           
    height: auto;
}
.specificationsbanner ul li:nth-child(2){
    flex: 2;           
}
.specificationsbanner ul li img{
    width: 100%;
    max-width: 490px;
}
.specificationsbanner ul li h2 strong{
    color: #002E6A;
    text-align: left;
}
.specificationsbanner ul li tr td{
    font-size: 14px;
    color: #002E6A;
    font-weight: 500;
    text-align: left;
}
.specificationsbanner ul li tr td:nth-child(2){
    color: #00CFCF;
    font-weight: 300;
}
.specificationsbanner table{
    width: 100%;
    max-width: 800px;
    border: 2px solid #002E6A;
    border-left: none;
    border-right: none;
    border-collapse: collapse;
    /* background-color: aqua; */
}
.specificationsbanner table td{
    height: 54px;
}










/* 문의하기 */
.contactbanner h1{
    color: #002E6A;
    white-space: nowrap;
}
.contactbanner h2{
    margin-bottom: 20px;
    display: none;
}
.contactbanner{
    background-color: white;
}
.contactbanner strong{
    color: #002E6A;
}
.contactbanner label{
    font-size: 14px;
    float: left;
    display: block;
    color: #002E6A;
    font-weight: 500;
    line-height: 48px;
    width: 130px;
    text-align: left;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
    margin-right: 10px;

}
.contactbanner .submitform{
    border-bottom: 2px solid #002E6A;
}
.contactbanner .form-group{
    height: 51px;         /*  높이 */
    border-collapse: collapse;
}
.contactbanner .contact{
    border-top: 2px solid #002E6A;
    border-collapse: collapse;
}
.contactbanner .messageform{
    height: 120px;
}
.contactbanner .messageform label{
    height: 120px;
    border: none;
}
.contactbanner select, option{
    width: calc(100% - 140px);
    display: block;
    line-height: 48px;
    height: 48px;        /*  높이 */
    font-size: 14px;
    font-weight: 300;
    color: #002E6A;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
}
.contactbanner input{
    display: block;
    color: #002E6A;
    font-weight: 300;
    line-height: 48px;
    width: calc(100% - 140px);
    text-align: left;
    border: none;
    font-size: 14px;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
}
.contactbanner input::placeholder {
    font-size: 14px;
    font-weight:300;
    color: #B1B1B1;
    
}
.contactbanner textarea::placeholder {
    font-size: 14px;
    font-weight: 300;
    color: #B1B1B1;
    
}
.contactbanner textarea {
    padding-top: 14px;
    width: calc(100% - 140px);
    height: calc(100% - 8px);
    font-size: 14px;
    font-weight: 300;
    color: #002E6A;
    border: none;
}
.contactbanner textarea:focus{
    border: none;
    outline: none;
}
.contactbanner h5{
    margin-top: 10px;
    color: #B1B1B1;
    font-size: 12px;
    font-weight: 200;
    text-align: left;
}
.contactbanner h5 a{
    margin-top: 10px;
    font-size: 12px;
    font-weight: 200;
    text-align: left;
    text-decoration: underline;
}
.contactbanner button{
    float: right;
    margin-top: -40px;
    font-size: 14px;
    font-weight: 400;
    width: 180px;
    height: 40px;   /*  높이 */
    background-color: #002E6A;
    border: none;
    cursor: pointer;
}
.copyright{
    width: 100%;
    display: block;
    position: absolute;
    bottom: 20px;
}
.copyright h5{
    font-size: 11px;
    text-align: center;
}







}


@media (max-width: 1050px) {

h1{
    font-size: 40px;
}
h2{
    font-size: 30px;
}
h3{
    font-size: 22px;
}
h4{
    font-size: 14px;
}
h5{
    font-size: 12px;
}
em{
    font-weight: 700;
}

.insightstxt{
    min-height: 200px;
}
.fb_txt{
    flex: 1.6;   
}
.gnb_w_m{
    display: block;
    background: center/cover no-repeat url(../image/icon_m_gnb_w.png);
    width: 40px;
    height: 40px;
    top: 20px;
    left: 20px;
    position: fixed;
    /* background-color: #002E6A; */
    z-index: 98;
    cursor: pointer;
}

.gnb_w{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* position: fixed; */
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);   /* 배경 흐림 */
    -webkit-backdrop-filter: blur(5px); /* 사파리용 */
    /* z-index: 99; */
}
.gnb_w ol{
    display: block;
    padding: 0 40px;
    /* margin: 0; */
    width: 100%;
    /* background-color: #00CFCF; */
}
.gnb_w li{
    width: 60%;
    /* margin-right: 60px; */
    line-height: 100px;
    /* opacity: 0.4; */
    /* cursor: pointer; */
    /* background-color: #002E6A; */
}
.gnb_w li a{
    /* color: #002E6A; */
    font-size: 30px;
    /* font-weight: 500; */
}
.gnb_w li:hover{
    /* opacity: 1; */
}
.gnb_w li:last-child {
  margin-left: 0;
  margin-right: auto;
}
.gnb_w .gnb_active{
    /* opacity: 1; */
} 
.gnb_w .gnb_m_c{
    margin-right: 0;
    display: block;
    background: center/cover no-repeat url(../image/icon_m_gnb_w_c.png);
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    position: fixed;
    z-index: 98;
    cursor: pointer;
}
.gnb_w .copyright{
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 20px;
    z-index: 9999;
}
.gnb_w .copyright h5{
    color: #B1B1B1;
    font-size: 11px;
    text-align: center;
}

.gnb_b_m{
    display: block;
    background: center/cover no-repeat url(../image/icon_m_gnb_b.png);
    width: 40px;
    height: 40px;
    top: 20px;
    left: 20px;
    position: fixed;
    /* background-color: #002E6A; */
    z-index: 98;
    cursor: pointer;
}

.gnb_b{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* position: fixed; */
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);   /* 배경 흐림 */
    -webkit-backdrop-filter: blur(5px); /* 사파리용 */
    /* z-index: 99; */
}
.gnb_b ol{
    display: block;
    padding: 0 40px;
    /* margin: 0; */
    width: 100%;
    /* background-color: #00CFCF; */
}
.gnb_b li{
    width: 60%;
    /* margin-right: 60px; */
    line-height: 100px;
    /* opacity: 0.4; */
    /* cursor: pointer; */
    /* background-color: #002E6A; */
}
.gnb_b li a{
    /* color: #002E6A; */
    font-size: 30px;
    /* font-weight: 500; */
}
.gnb_b li:hover{
    /* opacity: 1; */
}
.gnb_b li:last-child {
  margin-left: 0;
  margin-right: auto;
}
.gnb_b .gnb_active{
    /* opacity: 1; */
} 
.gnb_b .gnb_m_c{
    margin-right: 0;
    display: block;
    background: center/cover no-repeat url(../image/icon_m_gnb_b_c.png);
    width: 40px;
    height: 40px;
    top: 20px;
    right: 20px;
    position: fixed;
    z-index: 98;
    cursor: pointer;
}
.gnb_b .copyright{
    width: 100%;
    display: block;
    position: absolute;
    left: 0;
    bottom: 20px;
    z-index: 9999;
}
.gnb_b .copyright h5{
    color: #959595;
    font-size: 11px;
    text-align: center;
}


.gnb_show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.maintxt h2{
    font-size: 40px;
}

.insightstxt h2{
    margin-bottom: 20px;
}
.insightstxt{
    min-height: auto;
}





/* --------------------Flexibility -------------------------*/
.Flexibilitybanner:after{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(5, 11, 37, 0.6);
  backdrop-filter: blur(4px);   /* 배경 흐림 */
  -webkit-backdrop-filter: blur(4px); /* 사파리용 */
  z-index: -1;
}
.Flexibilitytxt{
    text-align: left;
}
.Flexibilitytxt h2{
    margin-bottom: 30px;
    text-align: center;
}
.Flexibilitytxt li strong{
    font-weight: 200;
}

ul.custom-list {
  list-style: none; /* 기본 불릿 제거 */
  padding-left: 10px; 
}

ul.custom-list li {
  position: relative;  /* ::before 기준 */
  margin-bottom: 20px;
  padding-left: 18px;  /* 박스 공간 확보 */
}

ul.custom-list li::before {
  content: "";
  position: absolute;  /* 텍스트 첫 줄 기준으로 박스 고정 */
  top: 8px;              /* 첫 줄 맨 위 */
  left: 5px;
  width: 6px;
  height: 6px;
  border: 1px solid #ffffff;
  box-sizing: border-box; 
}
.fb_box{
    display: block;      
    width: 100%;       
    gap: 50px;   
    align-items: center;
}
.fb_video{
    display: none;   
    justify-content: center; /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    position: relative;
    width: 80%;
    max-width: 700px;
    height: 100%;
    max-height: 918px;
    flex: 1; 
    overflow: hidden;
}
.fb_video video{
    border-radius: 30px;
    width: 100%;
    height: 100%;
    opacity: 0.8;
}
.fb_video img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.fb_txt{
    position: relative;
    flex: 1.2;    
}




/* --------------------Conveniencey -------------------------*/

.Convenienceytxt h2{
    margin-bottom: 0;
}
.Convenienceytxt ul{
    display: block;      /* 가로 정렬 */
    width: 90%;        /* 상위 박스 유동 */
    height: auto;
    margin: 0 auto;
}
.Convenienceytxt ul li{
    margin-top: 20px;
    position: relative;
    padding: 10px 15px 30px 15px;
    flex: 1;            /* 4개 박스 균등 분배 */
    height: auto;
    border: 1px solid #fff;
    border-radius: 10px;
    text-align: left;
}
.Convenienceytxt ul li::before {
  content: "";
  position: absolute;  /* 텍스트 첫 줄 기준으로 박스 고정 */
  top: 19px;              /* 첫 줄 맨 위 */
  left: 12px;
  transform: translate(0, 0);
  width: 6px;
  height: 6px;
  border-radius: 20px;
  border: 1px solid #ffffff;
  box-sizing: border-box; 
}
.Convenienceytxt ul li div{
    /* display: none; */
    position: absolute;
    right: 10px;
    left: auto;
    bottom: 10px;
    width: 40px;
    height: 40px;
    
}
.Convenienceytxt ul li h4{
    padding-top: 0;
    padding-left: 12px;
    font-size: 14px;
}
.Convenienceytxt ul li:hover{
    border: 1px solid #00CFCF;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);   /* 배경 흐림 */
    -webkit-backdrop-filter: blur(20px); /* 사파리용 */
}
.Convenienceytxt ul li:hover::before {
    border: 1px solid #00CFCF;
}
.Convenienceytxt ul li:hover h4{
    color: #00CFCF;
}





/* --------------------specifications -------------------------*/
.specificationsbanner h1{
    color: #002E6A;
}
.specificationsbanner h2{
    margin-bottom: 20px;
}
.specificationsbanner{
    background-color: white;
}
.specificationsbanner ul{
    margin: 0 auto;
    display: block;      /* 가로 정렬 */
    width: 100%;        /* 상위 박스 유동 */
}
.specificationsbanner ul li{
    display: none;
    position: relative;
    flex: 1;           
    height: auto;
}
.specificationsbanner ul li:nth-child(2){
    display: block;
    flex: 1;           
}
.specificationsbanner ul li img{
    width: 100%;
    max-width: 490px;
    /* background-color: #00CFCF; */
}
.specificationsbanner ul li h2 strong{
    color: #002E6A;
    text-align: left;
}
.specificationsbanner ul li tr td{
    color: #002E6A;
    font-weight: 500;
    text-align: left;
}
.specificationsbanner ul li tr td:nth-child(2){
    color: #00CFCF;
    font-weight: 300;
}
.specificationsbanner table{
    width: 100%;
    max-width: 800px;
    border: 2px solid #002E6A;
    border-left: none;
    border-right: none;
    border-collapse: collapse;
    /* background-color: aqua; */
}
.specificationsbanner table td{
    border: 1px solid #CCCCCC;
    border-left: none;
    border-right: 10px solid #fff;
    height: 54px;
}




/* 문의하기 */
.contactbanner h1{
    color: #002E6A;
    white-space: nowrap;
}
.contactbanner h2{
    margin-bottom: 10px;
    display: block;
}
.contactbanner{
    background-color: white;
}
.contactbanner strong{
    color: #002E6A;
}
.contactbanner label{
    font-size: 14px;
    float: left;
    display: block;
    color: #002E6A;
    font-weight: 500;
    line-height: 48px;
    width: 130px;
    text-align: left;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
    margin-right: 10px;

}
.contactbanner .submitform{
    border-bottom: 2px solid #002E6A;
}
.contactbanner .form-group{
    height: 51px;         /*  높이 */
    border-collapse: collapse;
}
.contactbanner .contact{
    border-top: 2px solid #002E6A;
    border-collapse: collapse;
}
.contactbanner .messageform{
    height: 120px;
}
.contactbanner .messageform label{
    height: 120px;
    border: none;
}
.contactbanner select, option{
    width: calc(100% - 140px);
    display: block;
    line-height: 48px;
    height: 48px;        /*  높이 */
    font-size: 14px;
    font-weight: 300;
    color: #002E6A;
    border: none;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
}
.contactbanner input{
    display: block;
    color: #002E6A;
    font-weight: 300;
    line-height: 48px;
    width: calc(100% - 140px);
    text-align: left;
    border: none;
    font-size: 14px;
    border-bottom: 1px solid #CCCCCC;
    border-collapse: collapse;
}
.contactbanner input::placeholder {
    font-size: 14px;
    font-weight:300;
    color: #B1B1B1;
    
}
.contactbanner textarea::placeholder {
    font-size: 14px;
    font-weight: 300;
    color: #B1B1B1;
    
}
.contactbanner textarea {
    padding-top: 14px;
    width: calc(100% - 140px);
    height: calc(100% - 8px);
    font-size: 14px;
    font-weight: 300;
    color: #002E6A;
    border: none;
}
.contactbanner textarea:focus{
    border: none;
    outline: none;
}
.contactbanner h5{
    margin-top: 10px;
    color: #B1B1B1;
    font-size: 12px;
    font-weight: 200;
    text-align: left;
}
.contactbanner h5 a{
    margin-top: 10px;
    font-size: 12px;
    font-weight: 200;
    text-align: left;
    text-decoration: underline;
}
.contactbanner button{
    float: none;
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    width: 180px;
    height: 40px;   /*  높이 */
    background-color: #002E6A;
    border: none;
    cursor: pointer;
}
.copyright{
    width: 100%;
    display: none;
    position: absolute;
    bottom: 20px;
}








}


























@media (max-width: 440px) {
.gnb_w li{
    margin-top: 10px;
    width: 80%;
    line-height: 70px;
}
.gnb_w li a{
    font-size: 24px;
}
.gnb_b li{
    margin-top: 10px;
    width: 80%;
    line-height: 70px;
}
.gnb_b li a{
    font-size: 24px;
}


}