@import url('/comm/css/sub.css');


/* 카테고리 */
.cate_con {overflow:hidden; display:block; margin: 0 auto 60px; padding:0 30px; box-sizing:border-box; position: relative; background:var(--grayBg);}
.cate_con ul {display:block; white-space:nowrap; text-align:center; font-size:0;}
.cate_con ul li {width:auto; display:inline-block; padding:0 5px;}
.cate_con ul li a {display:block; font-size:1rem; padding:17px 20px; line-height:120%; color:var(--basic); box-sizing:border-box; transition:all .3s linear; position:relative; text-align:center; font-weight: 400;}
.cate_con ul li a:after{content:''; display:block; width:0; height:3px; background:var(--main); position:absolute; left:0; bottom:0; z-index:2; transition:all .3s linear;}
.cate_con ul li:hover a {color:var(--main);}
.cate_con ul li:hover a:after {width:100%;}
.cate_con ul li.hover a {color:var(--main); font-weight:600;}
.cate_con ul li.hover a:after {width:100%;}


/* 카테고리(모바일) */
.mobile_cat {display:none; overflow:hidden; margin: 0 auto 50px; box-sizing:border-box; position: relative; width:100%; max-width:980px; padding:20px 30px; background:var(--grayBg); border-radius:5px;}
.mobile_cat ul {display:flex; flex-wrap:wrap; justify-content: center; gap:0 5px;}
.mobile_cat ul li {width:calc((100% - 10px) / 2); flex:1 1 auto;}
.mobile_cat ul li select {width:100%; font-size:0.9222rem; color:var(--basic); border:1px solid var(--border); padding:0 15px; font-family:inherit; height:50px !important; box-sizing:border-box; -webkit-appearance: none; -webkit-border-radius: 0; border-radius:5px; background-color:var(--white);}


/* 리스트 */
.pro_list {display:flex; flex-wrap:wrap; gap:30px;}
.pro_list figure {width:calc((100% - 90px) / 4);  border:1px solid var(--border); box-sizing:border-box; border-radius:var(--borderR30); overflow:hidden;}
.pro_list figure a{display:block;}
.pro_list figure dt{overflow: hidden; aspect-ratio: 1 / 1;}
.pro_list figure dt img{display: block; width: 100%; height: 100%; object-fit: contain; transition:all .3s linear;}
.pro_list figure dd {padding:15px 20px 30px 20px; box-sizing:border-box;}
.pro_list figure dd .fs24 {text-align:Center; width:100%; color:var(--black); font-weight:600; overflow: hidden; display:-webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; transition:all .3s linear; max-height: 5.85em;}
.pro_list figure:hover dt img {opacity:0.5;}
.pro_list figure:hover dd .fs26 {color:var(--main);}
    

/* 검색 */
.bbs_search {text-align:center; padding:30px 0 0; font-size:0; }
.bbs_search dl{display:flex; max-width:475px; width:100%; margin:0 auto;}
.bbs_search dt {width: 120px;}
.bbs_search dt select {font-size:0.9222rem; color:var(--basic); border:1px solid var(--border); padding:0 15px; font-family:inherit; box-sizing:border-box; -webkit-appearance: none; -webkit-border-radius: 0; background: url("/img/select_arrow.png") no-repeat right 15px center/10px auto; outline:none; cursor:pointer; width:100%; height:55px !important;}
.bbs_search dd {width:calc(100% - 120px); position:relative; display:flex;}
.bbs_search dd .search_input {font-size:1rem; color: var(--basic); border: 1px solid var(--border); background-color: var(--white); padding:0 15px; font-family:inherit; height:55px; line-height:53px; box-sizing:border-box; width:calc(100% - 55px); box-sizing:Border-box; border-left:0; border-right:0; -webkit-appearance: none; -webkit-border-radius: 0;}
.bbs_search dd .bbs_s_b{padding:0; border:0; background:var(--black); outline:none; cursor:pointer; width:55px; height:55px; display:flex; align-items:center; justify-content: center; width: 55px; transition:all .3s linear;}
.bbs_search dd .bbs_s_b:hover{background:#000;}
.bbs_search dd .bbs_s_b span{font-size:; color:var(--white);}


/* 뷰 */
.pro_view .fs34 {text-align:center; color:var(--black); margin-bottom:35px;}

.pro_view .pro_top {display: flex; gap: 60px; align-items: flex-start; margin-bottom:60px;}
.pro_view .pro_top .pro_img {width:41.8238%; max-width:665px;}
.pro_view .pro_top .pro_img .main_swiper_wrap {border: 1px solid var(--border); width: 100%; position: relative;}
/*.pro_view .pro_top .pro_img .main_swiper_wrap .swiper-slide {height: auto;}*/
.pro_view .pro_top .pro_img .main_swiper_wrap .imgbox {position:relative; display:inline-flex; align-items:center; justify-content:center; width: 100%; aspect-ratio: 1/1;}
.pro_view .pro_top .pro_img .main_swiper_wrap .imgbox img {display:block; max-width: 100%; margin:0 auto; }

.pro_view .pro_top .pro_img .main_swiper_wrap:only-child {width: 100%;}

.pro_view .pro_top .pro_img .main_swiper_btn_wrap {display: flex; gap: 4px; position: absolute; bottom: 30px; right: 30px; z-index: 2;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a {width: 60px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; color: var(--black); border: 1px solid rgba(34, 34, 34, 0.5); border-radius: 50%;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a:hover {border-color: var(--black);}

.pro_view .pro_top .pro_img .main_swiper_btn_wrap a::before {font-size: 24px; font-family: var(--icon); font-weight: 400; font-style: normal; line-height: 1;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a.main_swiper_prev::before {content: '\e5c4';}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a.main_swiper_next::before {content: '\e5c8';}

.pro_view .pro_top .pro_img .thumb_swiper {flex: auto; width:100%; margin-top:5px;}
.pro_view .pro_top .pro_img .thumb_swiper .swiper-slide {border: 1px solid var(--border);}
.pro_view .pro_top .pro_img .thumb_swiper .swiper-slide .imgbox {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1/1;}
.pro_view .pro_top .pro_img .thumb_swiper .swiper-slide .imgbox img {max-width: 100%; max-height: 100%;}

.pro_top .pro_txt {position:relative; width: calc(100% - 41.8238% - 60px);}
.pro_top .pro_txt .pro_btn {display:flex; gap:5px; margin-bottom:50px;}
.pro_top .pro_txt .pro_btn a {position:relative; width:calc((100% - 66px - 10px) / 2); height: 66px; box-sizing:border-box; border:1px solid var(--black); text-align:center; transition:all .3s linear; border-radius:var(--borderR5);}
.pro_top .pro_txt .pro_btn a span {position:relative; color:var(--white); display:flex; align-items:center; justify-content: space-between; width:100%;}  
.pro_top .pro_txt .pro_btn a span::after {font-family:var(--icon); color:var(--white); font-size:24px; color:var(--white); line-height:1;}
.pro_top .pro_txt .pro_btn a.catalogue {order:1; padding:18px 25px 18px 30px; background:var(--main); border-color:var(--main);}
.pro_top .pro_txt .pro_btn a.catalogue span::after {content:"download";}
.pro_top .pro_txt .pro_btn a.inquiry {order:2; padding:18px 25px 18px 30px; background:var(--sub); border-color:var(--sub);}
.pro_top .pro_txt .pro_btn a.inquiry span::after {content:"contract_edit";}
.pro_top .pro_txt .pro_btn a.listBtn {position:relative; order:3; width:66px; height:66px; display:flex; align-items:center; justify-content:Center; border-radius:var(--borderR5); text-indent:-55555px; background-color:var(--white); background-image:url('image/list_return.svg'); background-position:50% 50%; background-repeat:no-repeat; background-size:22px auto;}
/*.pro_top .pro_txt .pro_btn a.listBtn:before{display: inline-block; font-size:24px; vertical-align: middle; margin: -2px 0 0 0; font-family: "Material Symbols Outlined"; content:'\e5d2'; color:var(--black); text-indent:0;}*/
.pro_top .pro_txt .pro_btn a:hover {background-color:var(--white);}
.pro_top .pro_txt .pro_btn a.catalogue:hover {border-color:var(--main);}
.pro_top .pro_txt .pro_btn a.catalogue:hover span {color:var(--main);}
.pro_top .pro_txt .pro_btn a.catalogue:hover span::after {color:var(--main);}
.pro_top .pro_txt .pro_btn a.inquiry:hover span {color:var(--sub);}
.pro_top .pro_txt .pro_btn a.inquiry:hover span::after {color:var(--sub);}
.pro_top .pro_txt .pro_btn a.listBtn:hover {background-color:var(--grayBg);}

.pro_top .pro_txt .shortexp {display:block;}
.pro_top .pro_txt .shortexp .fs26 {color:var(--black); margin-bottom:20px;}
.pro_top .pro_txt .pro_info {margin: 30px 0 0; padding:18px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.pro_top .pro_txt .pro_info ul{}
.pro_top .pro_txt .pro_info ul li{font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 160%; padding:0 0 10px 82px; box-sizing:border-box; position:relative;}
.pro_top .pro_txt .pro_info ul li:last-child{padding-bottom: 0 !important;}
.pro_top .pro_txt .pro_info ul li .tit{display:inline-block; color:var(--black); letter-spacing: var(--letter-spacing-body); position: absolute; left: 0; top:0;}
.pro_top .pro_txt .pro_info .download_icon{vertical-align: middle; font-size:20px; margin: -4px 5px 0 0; color:#1C1B1F;}
.pro_top .pro_txt .pro_info .upfile2{padding: 20px 0 0; font-size:0.875rem; letter-spacing: var(--letter-spacing-caption); line-height: 150%; color:var(--black);}

.prd_detail {padding:60px 0 0; border-top:1px solid rgba(17,17,17,0.3);}
.pro_content {padding: 0 0 60px;}
.pro_content img {max-width:100%; height: auto !important;}


/* 관련제품 */
.prd_relation {padding:30px 0 60px 0; border-top:1px solid rgba(17,17,17,0.3);}
.pro_roll {position: relative; width: calc(100% + 30px); margin: 0 -15px;}
.pro_roll:after {content:''; display:block; clear:both;}

/* slick 트랙 및 슬라이드 flex 정렬 (높이 동기화) */
.pro_roll .slick-track {
    display: flex !important;
    align-items: flex-start !important; /* [핵심] 세로 모드의 큰 높이가 상속되는 것 방지 */
}

.pro_roll .slick-slide {
    height: auto !important;	/* 모든 슬라이드가 동일한 높이를 갖도록 설정 */
    display: block !important;
}

/* [핵심] slick이 슬라이드 내부에 자동으로 감싸는 직계 div 높이 강제 */
.pro_roll .slick-slide > div {
    display: flex;
    width: 100%;
}

/* figure: 사파리 버그 해결을 위해 flex 컨테이너로 전환 */
.pro_roll figure {
    display: flex;
    flex-direction: column;
    /* slick 적용 시 가로는 slick 설정(slidesToShow: 5)에 맡기고 마진을 유지합니다 */
    margin: 0 15px;
    box-sizing: border-box; 
    border: 1px solid var(--border); 
    border-radius: var(--borderR20); 
    overflow: hidden; 
    aspect-ratio: 294 / 450 !important;
    min-height: 0; /* 사파리 flex 오버플로우 방지 필수 */
}

/* 1. height: 100% 대신 flex: 1과 min-height: 0 적용 */
.pro_roll figure a {display: flex; flex-direction: column; width: 100%; text-decoration: none; min-height: 0; /* 사파리 자식 flex 높이 계산 정상화 */}
.pro_roll figure dl {display: flex; flex-direction: column; height: 100%; margin: 0;  min-height: 0;}
.pro_roll figure dt {width: 100%;  aspect-ratio: 1 / 1; flex-shrink: 0; overflow: hidden; }
.pro_roll figure dt img{display: block; width: 100%; height: 100%; object-fit: contain; transition:all .4s ease-out;}
.pro_roll figure dd {flex: 1;  display: flex; justify-content: center; padding: 15px 20px 20px 20px; box-sizing: border-box; min-height: 0; align-items: center; /* 텍스트 상하 중앙 정렬 필요시 */} 
.pro_roll figure dd .fsE22 {text-align:Center; width:100%; color:var(--black); font-weight:600; overflow: hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical; transition:all .4s ease-out; height:100%; max-height:6.3em;}
.pro_roll figure:hover dt img {opacity:0.5;}
.pro_roll figure:hover dd .fsE22 {color:var(--main);}

.pro_roll .slick-arrow {border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:40px; height:40px; transition:all .3s linear; position: absolute; z-index: 9999; opacity: 1; top:-75px;}
.pro_roll .slick-arrow::before {font-size: 30px; font-family: var(--icon); font-weight: 400; font-style: normal; line-height: 1;  text-indent:0; transition:all 0.4s ease-out; width:40px; height:40px; display:flex; align-items:center; justify-content:center;}
.pro_roll .slick-arrow:hover {opacity: 0.5;}
.pro_roll .slick-prev {left:50%; margin-left:-795px;}
.pro_roll .slick-prev::before {content: '\e5c4';}
.pro_roll .slick-next {right:50%; margin-right:-795px;}
.pro_roll .slick-next::before {content: '\e5c8';}

.prd_table_wrap {position:relative; overflow-x:auto; padding-bottom:10px;}
.prd_table {width:100%; border-top:2px solid var(--main); min-width:940px; border-left:1px solid var(--border);}
.prd_table th {background:var(--grayBg); padding:18px 15px; box-sizing:border-box; line-height:160%; border-right:1px solid var(--border); border-bottom:1px solid var(--border); color:var(--black); font-weight:600;}
.prd_table td {padding:18px 15px; box-sizing:border-box; line-height:160%; border-right:1px solid var(--border); border-bottom:1px solid var(--border);}
.prd_table td.cen {text-align:Center;}
.prd_table.center td {text-align:center;}

.prd_tit {color:var(--black); margin-bottom:15px; letter-spacing:0; font-family:var(--eng); font-weight:600;}

/*******************************************************************************
    @media 1760px
*******************************************************************************/
@media all and (max-width:1760px){

.pro_top .pro_txt .shortexp br {display:block;}

} 

/*******************************************************************************
    @media 1600px
*******************************************************************************/
@media all and (max-width:1690px){

.pro_roll .slick-prev {left:5px; margin-left:0;}
.pro_roll .slick-next {right:5px; margin-right:0;}

}

/*******************************************************************************
    @media 1400px
*******************************************************************************/
@media all and (max-width:1400px){

.pro_list {gap:20px;}
.pro_list figure {width:calc((100% - 60px) / 4);}
.pro_list figure dd .fs24 {font-size:1.122rem;}

.pro_view .pro_top {gap:40px; margin-bottom:60px;}
.pro_top .pro_txt {width: calc(100% - 41.8238% - 40px);}
.pro_top .pro_txt .pro_btn a.catalogue, .pro_top .pro_txt .pro_btn a.inquiry {padding: 18px 20px;}

.pro_roll figure dd .fsE22 {font-size:1.122rem;}

}


/*******************************************************************************
    @media 1400px
*******************************************************************************/
@media all and (max-width:1400px){

.pro_roll {width: calc(100% + 20px); margin: 0 -10px;}
.pro_roll figure {margin: 0 10px;}

}


/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:1100px){

/* 카테고리 */
.cate_con {margin: 0 auto 40px; padding:0 20px;}
.cate_con ul li a {padding:14px 12px;}

/* 리스트 */
.pro_list figure {width:calc((100% - 40px) / 3);}
.pro_list figure dd {padding:15px 15px 20px 15px;}
.pro_list figure dd .title{}
.pro_list figure dd .multiple{margin:8px 0 0;}


}


/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/* 카테고리(모바일) */
.mobile_cat {margin: 0 auto 35px; padding:15px;}
.mobile_cat ul li select {padding:0 15px; font-family:inherit; height:45px !important;}

/* 뷰 */
.pro_view .fs34 {margin-bottom:25px;}
.pro_view .pro_top {gap:30px; margin-bottom:40px;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap {bottom: 10px; right: 10px;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a {width: 45px;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a::before {font-size: 20px;}

.pro_top .pro_txt {width: calc(100% - 41.8238% - 30px);}
.pro_top .pro_txt .pro_btn {margin-bottom:40px;}
.pro_top .pro_txt .pro_btn a {position:relative; width:calc((100% - 58px - 10px) / 2); height: 58px;}
.pro_top .pro_txt .pro_btn a span::after {font-size:22px;}
.pro_top .pro_txt .pro_btn a.catalogue, .pro_top .pro_txt .pro_btn a.inquiry  {padding:14px 20px;}
.pro_top .pro_txt .pro_btn a.listBtn {width:58px; height:58px; background-size:20px auto;}
.pro_top .pro_txt .shortexp .fs26 {margin-bottom:10px;}

.prd_detail {padding:40px 0 0; border-top:1px solid rgba(17,17,17,0.3);}
.pro_content {padding: 0 0 40px;}


/* 관련제품 */
.prd_relation {padding:30px 0 40px 0;}

.pro_roll figure {aspect-ratio:294/440 !important;}
.pro_roll figure dd {padding:10px 15px 20px 15px;}

.pro_roll .slick-arrow {top:-60px; width:32px; height:32px;}
.pro_roll .slick-arrow::before {font-size:26px; width:32px; height:32px;}
.prd_table th, .prd_table td {padding:17px 14px}


}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:870px){

.pro_top .pro_txt .pro_btn {flex-wrap:wrap; margin-bottom:40px;}
.pro_top .pro_txt .pro_btn a {width:calc((100% - 5px) / 2);}
.pro_top .pro_txt .pro_btn a.catalogue {order:2;}
.pro_top .pro_txt .pro_btn a.inquiry {order:3;}
.pro_top .pro_txt .pro_btn a.listBtn {order:1; width:100%;}
.pro_top .pro_txt .pro_btn a.listBtn:before {font-size:22px; margin: -1px 0 0 0;}

}

/*******************************************************************************
    @media ~ 768px
*******************************************************************************/
@media all and (max-width:768px){

/* 리스트 */
.pro_list {gap:10px;}
.pro_list figure {width:calc((100% - 20px) / 2); aspect-ratio: 294 / 430;}
.pro_list figure dd {padding:15px 12px;}
.pro_list figure dd .fs24 {font-size: 1.208rem;}
.pro_list figure dd .title{}
.pro_list figure dd .multiple{margin:6px 0 0;}

/* 관련제품 */
.prd_relation {padding:20px 0 40px 0;}
.pro_roll {width: calc(100% + 10px); margin: 0 -5px;}
.pro_roll figure {margin: 0 5px; aspect-ratio:294/420 !important;}
.pro_roll figure dd {padding:5px 15px 10px 15px;}
.pro_roll .slick-arrow {top:-45px; width:28px; height:28px;}
.pro_roll .slick-arrow::before {font-size:22px; width:28px; height:28px;}

}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/* 카테고리 */
.cate_con {margin: 0 auto 20px;}
.cate_con ul li {margin:0 5px;}
.cate_con ul li a {padding:14px 0;}
.cate_con ul li a:after{height:2px;}

/* 카테고리(모바일) */
.mobile_cat {display:block; margin: 0 auto 25px; padding:10px;}
.mobile_cat ul li select {padding:0 10px; height:40px !important;}

/* 검색 */
.bbs_search {padding:20px 0 0;}
.bbs_search dt {width: 100px;}
.bbs_search dt select{height:45px !important;}
.bbs_search dd{width:calc(100% - 100px);}
.bbs_search dd .search_input {padding:0 10px; height:45px; line-height:43px; width:calc(100% - 45px);}
.bbs_search dd .bbs_s_b{width:45px; height:45px;}


/* 뷰 */
.pro_view .fs34 {margin-bottom:15px;}
.pro_view .pro_top {gap:30px 0; flex-direction:column;}
.pro_view .pro_top .pro_img {width:100%;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap {bottom: 10px; right: 10px;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a {width: 45px;}
.pro_view .pro_top .pro_img .main_swiper_btn_wrap a::before {font-size: 20px;}

.pro_top .pro_txt {width:100%;}
.pro_top .pro_txt .pro_btn {margin-bottom:30px;}
.pro_top .pro_txt .pro_btn a {width:calc((100% - 50px - 10px) / 2); height: 50px;}
.pro_top .pro_txt .pro_btn a span::after {font-size:18px;}
.pro_top .pro_txt .pro_btn a.catalogue {order:1; padding:12px 15px;}
.pro_top .pro_txt .pro_btn a.inquiry {order:2; padding:12px 15px;}
.pro_top .pro_txt .pro_btn a.listBtn {order:3; width:50px; height:50px; background-size:16px auto;}
.pro_top .pro_txt .pro_btn a.listBtn:before {font-size:20px; margin:0;}

.prd_detail {padding:40px 0 0; border-top:1px solid rgba(17,17,17,0.3);}
.pro_content {padding: 0 0 40px;}



.prd_table th, .prd_table td {padding:15px 12px}

}
/*******************************************************************************
    @media ~480px              
*******************************************************************************/
@media all and (max-width:480px){

/* 카테고리 */
.mobile_cat {margin: 0 auto 35px; padding:10px;}
.mobile_cat ul {flex-direction:column; gap:5px 0;}
.mobile_cat ul li {width:100%;}

/* 리스트 */
.pro_list figure {width:100%; aspect-ratio: auto;}

/* 뷰 */
.pro_top .pro_txt .pro_btn a {width:calc((100% - 5px) / 2);}
.pro_top .pro_txt .pro_btn a.listBtn {width:100%; order:1;}
.pro_top .pro_txt .pro_btn a.catalogue, .pro_top .pro_txt .pro_btn a.inquiry {padding:12px 10px;}

/* 관련제품 */
.pro_roll figure {aspect-ratio:auto !important;}

}