@charset "utf-8";


:root{
	--sub-visual-height: 68rem;
	--sub-menu-height: 92px;
    --area-width: 1344px;
}

#fullpage{
    padding-top: 100px;
}
html.no-scroll {
    overflow-y: hidden;
}
.tit_box h2{font-size: 5.2rem;
    font-weight: 800;}
.tit_box p{
    font-size: 2.2rem;
    font-weight: 500;
}
#open-modal{
    width: 130px;
    height: 130px;
    position: fixed;
    background-color: #2159c7;
    border-radius: 20px;
    display: flex;
    right: 90px;
    bottom: 59px;
    z-index: 999;
    flex-direction: column; justify-content: center; align-items: center;
}
#open-modal img{width: 35px; height: 35px; margin-top: -10px;}
#open-modal p{
    color: #eaeaea;
    font-size: 1.8rem;
    font-weight: bold;
}
#open-modal span{
    display: block;
    color: #eaeaea;
    font-size: 1.4rem;
    margin-top: 6px;
}
#search-modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 620px;
    height: 100%;
    background: #fff;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 15px;
    overflow-y: auto;
}

.modal-content {
}

.modal-top{
    border-bottom: 1px solid #ccc;
    padding: 60px 50px 40px;
}

.modal-inner{
    padding: 50px;
}

.modal-wrap:nth-child(2){
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;

}

.modal-wrap .tit-wrap{
    display: flex;
    align-items: center;
    padding-bottom: 15px;
}

.modal-wrap:nth-child(2) .tit-wrap{padding-top: 30px; padding-bottom: 25px;}

.modal-wrap .search-wrap{
    padding-bottom: 30px;
}

.tit-wrap.close-wrap{
    justify-content: space-between
}

.tit-wrap.close-wrap .search-tit{
    font-size: 2.8rem;
}

.close-btn {
    float: right;
    background: none;
    font-size: 2rem;
    
}
.close-btn i{font-weight: bold;}
.product-shortcut{
    display: inline-block;color: #666;
}

.search-tit{
    font-size: 2.4rem;
    font-weight: bold;
    text-align: left;
}

.search-subtit{
    padding-left: 10px;color: #666;
}

#search-input{
    background: #f1f1f1;
    padding: 13px 25px;
    font-size: 1.8rem;
    border-radius: 10px;
    color: #666;
    width: 80%;
}

#search-btn{
    background: #2159c7;
    padding: 13px 25px;
    cursor: pointer;
    font-size: 1.8rem;
    border-radius: 10px;
    color: #fff;
    width: calc(20% - 15px);
    margin-left: 10px;
}

/* 브랜드 필터 버튼 */
#brand-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding-bottom: 30px;
}

.brand-btn {
    background: white;
    border: 1px solid #ccc;
    padding: 13px 25px;
    cursor: pointer;
    font-size: 1.6rem;
    border-radius: 10px;
}

.brand-btn.active {
    background: #2159c7;
    border: 1px solid #2159c7;
    color: white;
}

/* 검색 결과 */
.results-grid ul{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    margin-top: 25px;
}

.result-item{
    border: 10px solid #f1f1f1;
    background-color: #fff;
    border-radius: 10px;
    /*aspect-ratio: 1 / 1;*/
    position: relative;
    display: block;
}

.refresh-btn{margin-left: 20px;width: 20px; margin-bottom: 5px;}
.refresh-btn img{opacity: 0.5;}

.filter-title .refresh-btn{margin: 0; width: 18px; margin-bottom: 2px;}

/*헤더*/
header { position: fixed; left: 0; top: 0; width: 100%; height: 100px; z-index: 99999; 
    transition: background-color 0.5s; background-color: #fff; box-shadow: rgba(149, 157, 165, 0.07) 0 8px 15px; min-width: 1465px;}
.header{display: grid ; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0; width: 100%; padding: 0 220px 0; 
    height: 100%; align-items: center; margin: 0 auto; position: relative;}
.header .logo { grid-row: 1; width: 160px; }
.header nav { grid-column: 2; grid-row: 1; height: 100%; margin: 0 auto; font-size: 2.2rem; }
.header nav .depth1 { position: relative; display: flex ; height: 100%; align-items: center; justify-content: center; z-index: 10000; }
.header nav .depth1 > li { position: relative; height: 100%;}
.header nav .depth1 > li > a { position: relative; display: flex ; height: 100%; padding: 0 5rem 0; 
    align-items: center; justify-content: center; color: #000; font-weight: 600;}
.header nav .depth2 {top: 100px; position: absolute;  width: 100%; height: 150px; display: flex; white-space: nowrap; text-align: center; justify-content: center;
    transition: all 0.3s; transition-delay: -0.1s; z-index: 1; border-top: 3px solid transparent;}
.header nav .depth2 li{ margin-bottom: 15px;}
.header nav .depth2 li:first-child{margin-top: 30px;}
.header nav .depth2 > ul > li > a { display: block; padding: 5px; font-size: 2rem; font-weight: 600; color: #666;}
.header nav .depth2 > ul > li:hover > a{color: #2159c7;}
.gnb_bg {position: absolute; left: 0; top: 100px; width: 100%; box-shadow: rgba(149, 157, 165, 0.07) 0px 8px 15px; background-color: #fff;  border-top: 1px solid #eee; height: 150px; overflow: hidden;/*display:none;opacity:0;*/z-index:9999;}
.header .contact a{padding: 13px 25px; background-color: #2159c7; color: #fff; font-size: 2rem; border-radius: 30px;}
.header .contact a:hover{background-color: #0e42a9;}
.header nav .depth2{display: none;}
.gnb_bg{display: none;}
.header nav .depth1 > li.on > a{animation: hoverdp1 0.1s forwards;}
.header nav .depth1 > li:not(.on) > a {
    animation: hoverdp1-reverse 0.1s forwards;
}
@keyframes hoverdp1 {
    0% {
        color: #000;
    }
    100% {
    color: #2159c7;
    }
}
@keyframes hoverdp1-reverse {
    0% {
        color: #2159c7;
    }
    100% {
        color: #000;
    }
}

.depth2.on{animation: hoverbg 1s forwards;}
@keyframes hoverbg {
    100% {
    border-top: 3px solid #2159c7;
    background-color: #f8f8f8;
    }
}

/*모바일 메뉴*/



.m_mnwrap {position: fixed; top: 0; z-index: 9999; width: 100%;}
  
  .m_mnin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
    height: 69px;
  }
  
  
  .menu-trigger {
    width: 25px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
  }
  
  .menu-trigger span {
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
  }
  
  .m_mnwrap.active .menu-trigger span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }
  
  .m_mnwrap.active .menu-trigger span:nth-child(2) {
    opacity: 0;
  }
  
  .m_mnwrap.active .menu-trigger span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
  
  /* 메뉴 영역 */
  .m_mnarea {
        display: block;
        position: fixed;
        top: 69px;
        right: -100%;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 9999;
        transition: all 0.4s ease-in-out;
        visibility: hidden;
  }
  
  .m_mnwrap.active .m_mnarea {
    right: 0px;
    visibility: visible;
  }
  
  /* 메뉴 리스트 */
  .m-menu {
    list-style: none;
    margin: 0;
    padding: 20px;
  }
  
  .m-menu-depth {
    margin-bottom: 1rem;
  }
  
  .m-menu-anchor {
    background: none;
    border: none;
    font-size: 24px;
    font-weight: bold;
    width: 100%;
    text-align: left;
    padding: 0.5rem 0;
  }
  
  .m-depth2 {
    padding-left: 1rem;
  }
  
  .m-depth2-ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
  }
  
  .m-depth2-anchor {
    margin-bottom: 0.5rem;
  }
  
  
  .m-final-anchor {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    line-height: 1.5;
  }


/*메인 비주얼*/
.mainVisual{
    overflow: hidden; 
    width: 100%; 
    position: relative; 
    background-color: #000;
    height: calc(100vh - 100px);
}
.mvSlider{
    width: 100%;
    height: 100%;
}
.mvSlider .slick-list , .mvSlider .slick-track , .mvSlider .slick-slide{
    height: 100%;
}
.mvSlider .slick-dots{
    position: absolute;
    bottom: 4rem;
    z-index: 9;
}
.slick-dots li{
    width: 12px;
    height: 12px;
    margin: 0 6px;
}
.slick-dots li button{
    width: 12px;
    height: 12px;
    padding: 0;

}
.slick-dots li button:before{
    color: #9d9d9d;
    width: 12px;
    height: 12px;
    line-height: 12px;
    font-size: 1.2rem;
    opacity: 1;
}
.slick-dots li.slick-active button:before{
    color: #2454b2;
    opacity: 1;
}
.mv-item{
    position: relative;
}
.mv-txt-con{
    position: absolute;
    left: 0px;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.mv-txt-box{
    display: flex;
    align-items: center;
    height: 100%;
    max-width: calc(100% - 20%);
    margin: 0 auto;
    gap: 100px;
}
.mv-txt-box .mv-txt{
    width: 44%;
}
.mv-img{width: 100%; height: 100%; background-image: url(/img/common/mainsl.png); background-size: cover; background-position: center; background-repeat: no-repeat; background-position-y: bottom;}
.mv-img.bg2{background-image: url(/img/common/mainbg2-min.jpg);}
.mv-img.bg3{background-image: url(/img/common/mainbg3-min.jpg);}
.mv-txt-box .mv-imgbox{
    display: flex;
    justify-content: center;
    width: calc(60% - 100px);
    padding: 14rem 3rem 10rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    max-height: 100%;
}
.mv-txt-box .mv-imgbox img{max-width: 100%; max-height: 100%; object-fit: contain;}
.mv-txt .sub_tit{
    font-size: 2.4rem;
    font-weight: 600;
    color: #eaeaea;
    margin-bottom: 12px;
}
.mv-txt .tit{
    font-size: 4.8rem;
    font-weight: bold;
    color: #f2f2f2;
    margin-bottom: 28px;
}
.mv-txt .txt{
    font-size: 2.2rem;
    font-weight: normal;
    color: #e3e3e3;
    line-height: 1.82;
}
.mv-txt.color-w .sub_tit{color: #000;}
.mv-txt.color-w .tit{color: #000;}
.mv-txt.color-w .txt{color: #000;}
.mv-txt.color-w .mv-link-btn a{color: #000;}

.mv-link-btn{
    margin-top: 64px;
}
.mv-link-btn a{
    font-size: 1.8rem;
    color: #fff;
}
.mv-link-btn a img{display: inline-block; margin-right: 12px;}
.mv-control{
    position: absolute;
    display: flex;
    align-items: center;
    left: 0;
    bottom: 13rem;
    width: 100%;
    z-index: 100;
}
.mv-control-inner{
    position: relative;
    display: flex;
    width: 100%;
    max-width: calc(100% - 440px);
    margin: 0 auto;
}
.slide-prev{
    margin-right: 16px;
}
.mv-control-inner button i{
    font-size: 4.2rem;
    color: #fff;
    opacity: 0.7;
}

/*메인 컨텐츠1 product*/
.mainProduct{
    position: relative;
    width: 100%;
    height: calc(100vh);
}
.prSlider{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
}
.pr-tab-con{
    height: 100%;
    width: 220px;
    overflow: hidden;
    background-color: #fff;
}
.pr-tab{
    max-height: 100%;
    overflow-y: auto;
    width: 100%;
    cursor: pointer;
    scrollbar-width: thin;
}
.pr-tab .tab{
    width: 100%;
    height: 125px;
}
.pr-tab .tab img{
}

.pr-con-wrap{
    width: calc(100% - 220px);
}
.pr-container{
    display: none;
    height: 100%;
    flex-wrap: wrap;
    align-content: center;
}
.pr-container.active{
    display: flex;
}
.pr-slider{
    width: 55%;
}
.pr-slider .slick-slide {
    margin-right: 70px;
    background-color: #d0d0d0;
    border-radius: 16px;
    height: 678px;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0.4;
}
.pr-slider .slick-slide.slick-current {
    opacity: 1;
}
.pr-slide-box{
    display: flex;
}
.pr-txt-con{
    width: 45%;
    position: relative;
}
.pr-txt-box{
    display: flex;
    align-items: center;
    height: 100%;
    width: 50%;
    margin-left: 150px;
}
.pr-prd-img-con{
padding: 70px;
max-width: 100%;
max-height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.pr-prd-img{
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.pr-txt .sub_tit{
    font-size: 1.8rem;
    font-weight: 600;
    color: #2159c7;
    text-decoration: underline;
    margin-bottom: 20px;
}
.pr-txt .tit{
    font-size: 5.2rem;
    font-weight: bold;
    color: #292929;
    margin-bottom: 32px;
}
.pr-txt .txt{
    font-size: 2.4rem;
    color: #393939;
    line-height: 1.3;
}
.pr-link-btn{
    display: inline-block;
    margin-top: 46px;
}
.pr-link-btn a{
    font-size: 1.8rem;
    color: #5d5d5d;
    padding: 16px 31px;
    border-radius: 5px;
    border: solid 1px #c7c7c7;
    display: inline-block;
}
.pr-control{
    position: absolute;
    display: flex;
    align-items: center;
    left: 150px;
    bottom: 50px;
    z-index: 100;
}
.pr-control-inner{
    position: relative;
    display: flex;
    width: 100%;
    margin: 0 auto;
}
.prslide-prev{
    margin-right: 64px;
}
.pr-control-inner button i{
    font-size: 4.2rem;
    color: #5d5d5d;
    opacity: 0.7;
}

/*메인 컨텐츠2 about*/
.mainAbout .tit_box{
    margin-top: 140px;
    margin-bottom: 72px;
    text-align: center;
}
.about-tab-con{
    text-align: center;
    /* max-width: 1760px; */
    margin: 0 auto 70px auto;
}
.about-tab {
    max-width: 1760px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 20px;
}
.about-tab ul {
    white-space: nowrap;
}
.about-tab ul li {
    display: inline-block;
    margin-right: 24px;
}
.about-tab ul li:last-child{margin-right: 0;}
.about-tab ul li a {
    display: block;
    background: #fff;
    color: #252a2a;
    padding: 12px 24px;
    box-sizing: border-box;
    border-radius: 30px;
    border: solid 1px #e9eded;
    font-size: 2.4rem;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.04);
}
.about-tab ul li a.active {
    background: #2159c7;
    color: #fff;
    border-color: #2159c7;
    box-shadow: none;
}

.about_slider{
    position: relative;
    width: 100%;
    padding: 50px 20px;
}
.about_slider .slick-list{
    overflow: visible;
}
.about_slide{
    transition: transform 0.3s ease-in-out;
    transform: scale(1.0);
    background-color: #ccc;
    height: 400px;
    margin: 0 110px;
    overflow: hidden;
    width: 823px;
    border-radius: 20px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);

}
.about_slide.slick-center.slick-current{
    transform: scale(1.3);
}
.about_slide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background: linear-gradient(to top, rgba(6, 14, 29, 0.92), rgba(84, 84, 84, 0));*/
    pointer-events: none; 
    z-index: 1; 
}

.about_txt_box{
}

    .about_slide img{position: absolute; width: 100%; height: 100%; object-fit: cover;}
    .about_txt{position: absolute; bottom: 0; padding: 50px 60px 50px 40px; z-index: 2; opacity: 0; transition: all 1s;}
    .about_slide.slick-center.slick-current .about_txt{opacity: 1;}
    .about_txt .tit{font-size: 2.3rem; font-weight: bold; color: #fff; padding-bottom: 15px;}
    .about_txt .txt{font-size: 1.8rem; color: #fff; line-height: 1.5;}

.about_slider .slick-dots{
    bottom: -75px;
}


/*메인 협력사*/
.mainPartners{
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mainPartners .tit_box{
    max-width: 1470px;
    margin: 0 auto;
    width: 100%;
    margin-bottom: 120px;
    padding-left: 20px;
}
.mainPartners .tit_box h2{margin-bottom: 24px; font-weight: bold;}
.partners_wrap {
            overflow: hidden; /* 영역을 벗어나는 로고를 숨김 */
            width: 100%;
        }

        .partners_wrap_box {
            margin-bottom: 20px; /* 위아래 줄 간격 */
        }

        .partners_list {
            display: flex; /* 로고들을 가로로 정렬 */
            flex-wrap: nowrap; /* 줄바꿈 방지 */
            width: max-content; /* 자식 요소들의 너비만큼 너비를 가짐 */
        }

        /* 왼쪽으로 흐르는 애니메이션 */
        .partners_list.left {
            animation: slide-left 9s linear infinite;
        }

        /* 오른쪽으로 흐르는 애니메이션 */
        .partners_list.right {
            /* JS에서 복제된 리스트가 뒤에 붙으므로, 초기 위치를 -50%로 설정 */
            transform: translateX(-50%);
            animation: slide-right 18s linear infinite;
        }

        .partners {
            flex-shrink: 0; /* 로고가 찌그러지는 것을 방지 */
            margin: 0 20px; /* 로고 사이 간격 */
        }

        .logo_box {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100px;
            width: auto; /* 로고 박스 너비 지정 (필요시 조절) */
        }
        .logo_box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        

        /* 왼쪽으로 이동하는 키프레임 */
        @keyframes slide-left {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%); /* 복제된 요소를 포함한 전체 너비의 50%만큼 이동 */
            }
        }

        /* 오른쪽으로 이동하는 키프레임 */
        @keyframes slide-right {
            from {
                transform: translateX(-50%);
            }
            to {
                transform: translateX(0);
            }
        }

/*메인 하단버튼*/
.main_fbutton{width: 100%;}
.fbtn_wrap{display: flex;}
.fbtn{width: 50%; height: 290px; overflow: hidden; position: relative;}
.fbtn a{position: absolute;
    z-index: 99;
    display: block; 
    color: #fff; 
    text-align: center; 
    width: 100%; 
    height: 100%;
    box-sizing: border-box; 
    line-height: 290px;
    font-size: 4.8rem; 
    font-weight: 600;}
    .fbtn a img{padding-left: 15px; padding-bottom: 10px; opacity: 0; transition: opacity 0.3s ease;}
    .fbtn:hover a img {
        opacity: 1;
    }
.fbtn .bg{
    background-repeat: no-repeat;
    width: 110%;
    height: 110%;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: transform 300ms ease 0s;
    transform: translate(-50%, -50%);
    background-size: cover;
    z-index: 5;
    }
.fbtn:hover .bg{transition: transform cubic-bezier(0.4,0,0.2,1) .3s;
    -webkit-transition: transform cubic-bezier(0.4,0,0.2,1) .3s;
    will-change: transform;
    transform: translate(-50%, -50%) scale(0.91) rotate(0.001deg);}

.fbtn .bg.flash {
    animation: flash 0.3s ease-in-out;
}

@keyframes flash {
    0% { opacity: 1; }
    50% { opacity: 0.9; }
    100% { opacity: 1; }
}

/*푸터*/
.footer{background-color: #000; display: flex; justify-content: center;}
.footerInner{display: flex; gap: 105px; padding: 55px 20px; width: 100%; max-width: 1480px;}
.ft_logo{width: 140px;}
.ft_link{color: #efefef; font-size: 18px; padding-bottom: 24px;}
.ft_link li{display: inline;}
.ft_link li:first-child{padding-right: 13px; position: relative;}
.ft_link li:first-child:after{content: ''; display: block; position: absolute; width: 1px; height: 14px; 
    background-color: #707070; right: 0; top: 4px;}
.ft_link li:last-child{padding-left: 13px;}
.ft_txt ul li{padding-bottom: 12px;}
.ft_adress{color: #f8f8f8;}
.ft_tel{color: #afafaf; font-size: 1.5rem;}
.ft_tel span{padding-right: 15px;}
.ft_copy{color: #797979; font-size: 1.6rem;}


/*서브비주얼*/
#visual{position:relative; width:100%; height:var(--sub-visual-height); }
#visual .visual-img-con{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%;
	height:var(--sub-visual-height);
	overflow:hidden; 
}
#visual .visual-img-inner{
	width:100%; 
	height:100%; 
	background-size:cover !important; 
}
#visual .visual-txt-con{position:relative; z-index:1; text-align:center; display:table; width:100%; height:100%; color:#fff; box-sizing: border-box;}
#visual .visual-txt-container{position:relative; width:100%; padding-top: 3rem;}
#visual .visual-tit{
	font-size: 6.4rem;
    font-weight: 800;
}
#visual .visual-sub-txt{
	font-size:1.6rem; 
	font-weight:300; 
	padding-top:30px;
}
#visual .table-cell-layout{
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
.location{overflow:hidden; margin-top: 4rem;}
.location li{display:inline-block; vertical-align:middle; color:#fff; font-size:2.2rem; font-weight: 500;}
.location li a{color:inherit;}
.location li i{font-size:1.8rem; margin-top:-2px;}
.location li:before{font-family: 'xeicon'; display:inline-block; content: "\e93f"; position:relative; top:-1px; vertical-align:middle; margin:0px 10px 0 8px; color:#fff; font-size:22px;}
.location li:first-child:before{display:none;}

#topMenu01{position:relative; width:100%; height:var(--sub-menu-height); margin-top: calc(-1*(var(--sub-menu-height))); z-index: 100;}
#topMenu01 .side-menu-inner{text-align:center; width:100%; height:var(--sub-menu-height);}
#topMenu01 .side-menu-inner ul{display:flex; align-items:center; justify-content:center;background-color: rgba(255,255,255,0.04);}
#topMenu01 .side-menu-inner ul:before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.13); z-index: 1;}
#topMenu01 .side-menu-inner ul li{width: 100%; max-width:670px;} /* max-width 자유롭게 수정 */
#topMenu01.gall .side-menu-inner ul li{max-width:1340px;}
#topMenu01 .side-menu-inner ul li > a{
	display:block; 
	display:table; 
	position:relative;
	width:100%;
	height:var(--sub-menu-height);
	line-height:1.2; 
	color:#fff; 
	font-size:2rem; 
	word-break:keep-all;
}

#topMenu01 .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; padding:0 25px; font-weight: 500;}
#topMenu01 .side-menu-inner ul li.on > a{position: relative;}
#topMenu01 .side-menu-inner ul li.on > a > span{font-weight: bold;}
#topMenu01 .side-menu-inner ul li > a:before {position: absolute; content: ''; top: 0; left: 50%; width: 0; height: 3px; background: #ffffff00; z-index: 1; transition:all 0.6s ease-in-out;}
#topMenu01 .side-menu-inner ul li:hover a:before {width:100%; left:0; background: #fff;}
#topMenu01.loaded .side-menu-inner ul li.on > a::before {position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 3px; background: #fff; z-index: 1;}


#content.wide{padding:150px 20px 0 20px;}
#contentInfoCon{position:relative; margin:0 auto 6rem; text-align:center;}
#contentInfoCon .content-tit{font-size:4.2rem; line-height: 1.1; font-weight:800; color: #000;}
#contentInfoCon .content-subtxt{font-size: 24px; margin-top: 16px; color: #000; padding-bottom: 40px; font-weight: 500;}
/*CEO 인사말*/
.ceo-greeting-container {
    max-width: 800px;
    width: 100%;
    background-color: #ffffff; /* White background for the content */
    padding: 30px 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Header Styling */
.greeting-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #0056b3; /* A distinct blue for the company brand */
}

.greeting-header h1 {
    font-size: 2.2em; /* Larger font size for the main title */
    color: #003366; /* Darker blue for the title */
    font-weight: 700; /* Bold */
    margin: 0;
}

/* Main Greeting Section */
.greeting-main {
    text-align: left;
    max-width: 1340px;
    width: 100%;
    background-color: #ffffff; /* White background for the content */
    padding: 30px 40px;
    border-radius: 8px;
    margin: 0 auto;
}

/* Emphasis Paragraph (Catchphrase) */
.greeting-emphasis {
    font-size: 1.3em;
    color: #0056b3; /* Brand blue */
    text-align: center;
    margin-bottom: 30px;
    font-weight: 700;
    padding: 10px;
    background-color: #e9f2fa; /* Light blue tint for emphasis background */
    border-left: 4px solid #0056b3;
}

/* Content Paragraphs */
.greeting-content p {
    font-size: 1em; /* Standard font size for readability */
    margin-bottom: 20px; /* Spacing between paragraphs */
    text-align: justify; /* Justified text for a formal look */
    color: #454545; /* Slightly softer than pure black */
}

.greeting-content p strong {
    color: #003366; /* Darker blue for emphasis within text */
}

/* Signature Styling */
.greeting-signature {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0; /* Light separator line */
    text-align: right;
}

.greeting-signature p {
    font-size: 1.1em;
    font-weight: 700; /* Bold signature */
    color: #003366;
    margin: 0;
}

/*연혁*/
.history-con{margin-bottom: 90px; position: relative;}
.history-con:before{display: block; width: 100%; background-color: #ccc; height: 1px; content: ''; top: 107px; position: absolute;}
.history-con:after {
    display: block;
    clear: both;
    content: '';
}
.hiSlider{
    width: calc(100% - 290px);
    float: right;
    overflow: hidden;
    position: relative;
    min-height: 550px;
}
.hiSlider .slick-dots{
    position: absolute;
    bottom: 4rem;
    z-index: 9;
    left: -145px;
}
.hi-control{
    margin-bottom: 45px;
}
.hi-control-inner{
    position: relative;
    display: flex;
    width: 100%;
    max-width: calc(100% - 560px);
    margin: 0 auto;
    justify-content: flex-end;
}
.hi-control-inner button i{
    font-size: 5.2rem;
    color: #5d5d5d;
    opacity: 0.7;
}
.hislide-next{margin-left: 50px;}
.history-year-group-box .history-year-item {
    margin-bottom: 8.5rem;
    width: calc((100vw - 160px)/2.5);
    position: relative;
}
.history-year-item:after{content: ''; display: block; position: absolute; width: 20px; height: 20px; background-color: #2159c7; border-radius: 50%; top: 0;}

.history-year-group-box .history-year-item:last-of-type {
    margin-bottom: 0;
}

.history-year-group-box .history-year-item .history-year {
    display: block;
    padding-top: 75px;
}

.history-year-group-box .history-year-item .history-year strong {
    color: #adadad;
    line-height: 1.1;
    font-size: 6.5rem;
  font-weight: bold;
  padding-bottom: 52px;
}
.history-year-group-box .history-year-item.slick-current.slick-active .history-year strong{
    animation: historyYear 0.5s forwards;
}
@keyframes historyYear {
    100% {
        color: #2159c7;
        font-size: 12rem;
        font-weight: 800;
    }
}
.history-year-group-box .history-year-item .history-month-box {
    padding-top: 50px;
}

.history-year-group-box .history-year-item .history-month-item {
    display: flex;
    margin-bottom: 0.6rem;
}

.history-year-group-box .history-year-item .history-month-item .history-month {
    font-size: 2.6rem;
    line-height: 1.7em;
    color: #262626;
    padding-right: 32px;
    box-sizing: border-box;
}

.history-year-group-box .history-year-item .history-month-item .history-detail-txt {
    position: relative;
    font-size: 2.6rem;
    line-height: 1.7em;
    color: #262626;
    padding-left: 1.2rem;
}

/*문의*/
.formmail-page{max-width: 1340px; margin: 0 auto;}
.form-section.category{background-color: #fafafa; padding: 26px 48px; border-radius: 16px; margin-bottom: 24px;}
.form-section{display: flex; gap: 10px 24px; font-size: 2.2rem; flex-wrap: wrap;}
.form-group{background-color: #fafafa; padding: 26px 48px; border-radius: 16px; margin-bottom: 24px; flex: 1; display: flex;}
  
  .form-section.category input[type="checkbox"] {
    appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #7d7d7d;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  }
.form-section.category input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 8px;
    width: 6px;
    height: 12px;
    border: solid #7d7d7d;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  /* 체크됐을 때 색상 변경 */
  .form-section.category input[type="checkbox"]:checked {
    background-color: #2159c7;
    border-color: #2159c7;
  }
  
  .form-section.category input[type="checkbox"]:checked::after {
    border-color: #fff;
  }
  .form-section.category input[type="checkbox"] + span{
    font-weight: 600;
  }
  .form-section.category input[type="checkbox"]:checked + span {
    color: #2159c7;
  }
  .form-section.category label {
    font-size: 2rem;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #7d7d7d; 
    margin-bottom: 8px;
    margin-right: 20px;
    font-weight: 500;
  }
  .form-section strong{font-weight: bold; width: 156px; display: inline-block;}

  .form-group label{
    width: 180px;
    flex-shrink: 0;
    display: inline-block;
  }
  .form-group:last-child label{width: 100px;}

.form-group.email input[type="email"] {
    color: #000;
    background-color: transparent;
  }
.form-group input[type="email"]::placeholder {
    color: #adadad;
    font-weight: 500;
  }

.form-group input[type="text"] {
    color: #000;
    background-color: transparent;
  }
.form-group input[type="text"]::placeholder {color: #adadad;}
  .button-group input[type="submit"]{border-radius: 10px; border: solid 2px #2159c7; color: #2159c7; background-color: #fff; padding: 16px 60px; color: #2159c7; font-size: 20px; font-weight: 500;}
  .button-group input[type="reset"]{border-radius: 10px; border: solid 2px #adadad; color: #7d7d7d; background-color: #fff; padding: 16px 60px; cursor: pointer; font-size: 20px; font-weight: 500;}

.form-section.message{background-color: #fafafa; padding: 26px 48px; border-radius: 16px; }
.form-section.message textarea{background-color: transparent; border: 0; padding: 3px;   font-size: 22px; font-weight: 500;    min-height: 300px; margin-top: 10px;}
.form-section.message textarea::placeholder{color: #adadad;}

.button-group{    display: flex;
        gap: 20px;
        justify-content: center;
        margin-top: 50px;
        margin-bottom: 200px;
    }


  
  #bo_gall .gall_img a, #bo_gall .gall_img .no_image, #bo_gall .gall_img .is_notice {
    height: 100%;
}
  
  

  @media (max-width: 1400px) {
    .hiSlider .slick-dots{left:-70px;}
    .pr-slider .slick-slide{height: 388px; margin-right: 20px;}
    .pr-txt-box{margin-left: 50px; padding-right: 60px; width: auto;}
    .pr-control{left: 40px; bottom: -60px;}
  }

  @media (max-width: 1200px) {
  .mv-txt .tit {font-size: 2.8rem;}
  .mv-txt .txt {font-size: 1.8rem;}
  .pr-txt .tit {font-size: 2.8rem;}
  .pr-txt .txt {font-size: 1.8rem;}
  .pr-link-btn a{font-size: 1.4rem;}
  .pr-control{left: 40px;bottom: 0px;}
  .pr-link-btn{margin-top: 26px;}
  .about-tab ul li a{font-size: 1.8rem;}
  .about_txt .tit{font-size: 1.8rem;}
  .about_txt .txt{font-size: 1.4rem;}

  .history-year-group-box .history-year-item{width: calc(100vw / 1.5);}
}

  @media (max-width: 1023px) {
    #open-modal{display: none;}

    .logo a img{width: 125px;} 
    .m_mnin{padding:20px;}
    #header { display: none; }
    .menu_bg{display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9998;}
    #fullpage{padding-top: 69px;}
    #content.wide{padding: 80px 20px 0}

    .mainVisual{height: 300px;}
    .mv-txt-box .mv-imgbox{padding: 20px 0; max-height: 90%;}
    .mv-txt .tit{font-size: 16px; margin-bottom: 28px;}
    .mv-txt .sub_tit{font-size: 12px; margin-bottom: 12px;}
    .mv-txt .txt{display: none;}
    .mv-link-btn{margin-top: 10px;}
    .mv-link-btn a{font-size: 12px;}
    .mv-link-btn a img{width: 16px; height: 16px;}
    .mvSlider .slick-dots{bottom: 16px; }
    .slick-dots li{margin: 0 3px;}
    .mv-control{display: none;}

    .mainProduct{height: auto;}
    .prSlider{position: relative;    flex-direction: column;}
    .pr-tab-con {width: 100%; /* 너비를 100%로 변경 */
        height: auto;  /* 높이는 내용에 맞게 자동 조절 */}
    .pr-tab{display: flex;        /* 아이템들을 가로로 정렬 */
        overflow-x: scroll;     /* 가로 스크롤 활성화 */
        overflow-y: hidden;   /* 세로 스크롤 비활성화 */
        height: auto;}
    .pr-tab .tab{flex-shrink: 0;   /* 아이템이 찌그러지는 것 방지 */
        width: 150px;     /* 각 아이템의 가로 너비 지정 */
    height: auto;}
    .pr-con-wrap{width: 100%;}
    .pr-slider{width: 100%; padding-left: 20px; margin-top: 20px;}
    .pr-txt-con{width: 100%;}
    .pr-container{align-content: unset;}
    .pr-slider .slick-slide{height: 388px; margin-right: 20px;}
    .pr-txt-box{margin-left: 20px; width: 100%;height: auto;margin-top: 30px;}
    .pr-control{left: unset;bottom: unset; position: relative;}
    .pr-txt .tit{font-size: 16px;margin-bottom: 22px;}
    .pr-txt .sub_tit{font-size: 12px;  margin-bottom: 10px;}
    .pr-txt .txt{display: none;}
    .pr-control-inner button i { font-size: 3.2rem;}
    .pr-prd-img{max-width: 90%; max-height: 90%;}
    .pr-prd-img-con{padding: 20px;}
    .pr-link-btn{margin-top:0; margin-bottom: 20px;}
    .pr-link-btn a{padding: 12px 25px;}
    .about-tab ul li{margin-right: 10px;}
    .about-tab ul li a{font-size: 1.8rem;}

     .pr-tab::-webkit-scrollbar {
        height: 8px; /* 가로 스크롤바의 높이 */
    }

    /* 스크롤바 트랙(경로)에 대한 스타일 */
    .pr-tab::-webkit-scrollbar-track {
        background: #f1f1f1; /* 트랙 배경색 */
    }

    /* 스크롤바 막대(thumb)에 대한 스타일 */
    .pr-tab::-webkit-scrollbar-thumb {
        background: #888; /* 막대 색상 */
        border-radius: 4px; /* 막대 모서리 둥글게 */
    }

    /* 스크롤바 막대에 마우스를 올렸을 때 스타일 */
    .pr-tab::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

    
    

    #contentInfoCon .content-subtxt{font-size: 17px; padding-bottom: 10px;}
    #visual .visual-txt-container{padding-top: 0;}
    #visual .visual-tit{font-size: 48px;}
    .location{margin-top: 14px;}
    .location li{font-size: 14px;}

    .form-group{margin-bottom: 10px;padding: 21px 25px; border-radius: 10px;}
    .form-section{gap: 0; flex-direction: column;}
    .form-section strong{width: 100%;}
    .form-section.category{gap: 5px 25px; margin-bottom: 10px;padding: 21px 25px;    flex-direction: row;}
    .form-section.category strong{margin-bottom: 20px; gap: 5px 25px;}
    .form-section.message{padding: 21px 25px;}
    .form-group label{ width: 110px;}
    .form-group:last-child label{width: 110px;}
    .form-group input[type="text"]{width: 100%;box-sizing: border-box;}
    .form-group.email input[type="email"]{width: 100%;box-sizing: border-box;}
    .form-section.message textarea{font-size: inherit;    min-height: 200px;}
    .form-section.category label{gap: 8px; margin-bottom: 8px; margin-right: 0px; width: calc(50% - 13px);}
    .button-group{margin-top: 40px; margin-bottom: 50px;}
    .button-group input[type="submit"]{font-size: 16px; padding: 16px 45px;}
    .button-group input[type="reset"]{font-size: 16px; padding: 16px 45px;}

    .hiSlider{width: 100%;}
    .hiSlider .slick-dots{left: unset;}
    
    .history-year-group-box .history-year-item .history-year strong{font-size: 25px;}
    @keyframes historyYear {
    100% {
        color: #2159c7;
        font-size: 8rem;
        font-weight: 800;
    }
    }

    .about_slide{margin: 0 40px;}

    .fbtn_wrap{display: block;}
    .fbtn{width: 100%; height: 150px;}
    .fbtn a{line-height: 150px; font-size: 3.8rem;}
    .footerInner{
    flex-direction: column;
    align-items: center;
    gap: 35px;
    }

    :root{
	--sub-visual-height: 35rem;
	--sub-menu-height: 52px;
    --area-width: 1344px;
}



  }

  @media (max-width: 767px) {
    .hi-control {margin-bottom: 55px;}
    .mv-txt-box{gap: 20px; justify-content: center; max-width: 100%;}
  .about-tab ul li a{ padding: 8px 12px;}
  .mainPartners .tit_box{margin-bottom: 30px;}
  .mainPartners{margin: 200px 0 100px; height: auto;}

  .history-year-group-box .history-year-item{width: 100vw;}
  }

  @media (min-width: 1024px) {
    .m_mnwrap {display: none;}
    .about-tab ul li a{}
  }