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


/* 카테고리 */
.cate_con {overflow:hidden; margin: 0 auto 60px; box-sizing:border-box; position: relative;}
.cate_con ul {display:flex;} /* flex-wrap:wrap; justify-content: center; */
.cate_con ul li {width:auto; margin: 2px; flex: 1 0 0;}
.cate_con ul li a {position:relative; display:block; font-size:1rem; min-width:180px; padding:0; line-height:68px; height:70px; border-radius:10rem; letter-spacing:var(--letter-spacing-button); color:var(--basic); box-sizing:border-box; transition:all .3s linear; position:relative; text-align:center; border:1px solid var(--border); font-weight: 400; overflow:hidden;}
.cate_con ul li a img {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:2; height:100%;} 
.cate_con ul li:hover a {border-color:var(--main); color:var(--main);}
.cate_con ul li.hover a {background:var(--main) !important; border-color:var(--main) !important; color:var(--white) !important;}
.cate_con ul li.imgBn span {position:absolute; left:0; top:0; text-indent:-9999; opacity:0;}
.cate_con ul li.imgBn.hover a {background:var(--white) !important; border-color:transparent !important;}
.cate_con ul li.imgBn.hover a::after {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; border-radius:10rem; z-index:2; border:2px solid var(--main); box-sizing:border-box;}


/* 리스트 */
.pro_list {display:flex; flex-wrap:wrap; gap:30px;}
.pro_list figure {width:calc((100% - 90px) / 4); box-sizing:border-box;}
.pro_list figure a {display:block;}
.pro_list dl dt {position:relative; overflow: hidden; aspect-ratio: 1 / 1; border:1px solid var(--border); box-sizing:border-box; border-radius:var(--borderR20); transition:all 0.3s ease-out; }
.pro_list dl dt::after {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; line-height:1; width:50px; height:50px; border-radius:var(--borderAll); background:var(--main); opacity:0; transition:all 0.3s ease-out; content:"feature_search"; color:var(--white); font-family:var(--icon); font-size:24px;}
.pro_list dl dt img {display: block; width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.pro_list figure a:hover dl dt {border-color:var(--main);}
.pro_list figure a:hover dl dt::after {opacity:1;}
.pro_list dl dd {padding-top:30px; box-sizing:border-box; text-align:center;}
.pro_list dl dd .title {font-weight:700; font-family:var(--eng); color:var(--black); letter-spacing:0; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.pro_list dl dd .multiple {height:100%; max-height:3rem; margin:10px 0 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;}


/* 검색 */
.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; gap:0 5px;}
.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; border-radius: 0; background: url("/img/cat_arrow_bk.svg") no-repeat right 20px 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% - 60px); box-sizing:Border-box; -webkit-appearance: none; border-radius: 0;}
.bbs_search dd .bbs_s_b {padding:0; border:0; margin-left:5px; background:var(--main); 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:var(--sub);}
.bbs_search dd .bbs_s_b span {color:var(--white);}


/* 뷰 */
.pro_view {position:relative;}
.pro_view .pro_view_option {position:absolute; right:0; top:-50px; z-index:10; display:flex; justify-content:flex-end; align-items:center;}
.pro_view .fsize_cont {display:flex; flex-wrap:wrap; align-items:center; gap:1px;}
.pro_view .fsize_cont p {margin-right:10px; color:var(--black); font-weight:600;}
.pro_view .fsize_cont a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width: 31px; height: 27px; background:rgba(0,0,0,0.3); box-sizing:border-box; transition:all 0.3s ease;}
.pro_view .fsize_cont a:hover {background:var(--black); transition:all 0.3s ease;}
.pro_view .fsize_cont a::before {content:''; font-family:var(--icon); font-size:19px; color:var(--white); line-height:1; display:block; }
.pro_view .fsize_cont a.mn {border-radius: 0px 80px 80px 0px; padding-right:2px;}
.pro_view .fsize_cont a.mn::before {content:'\e15b';}
.pro_view .fsize_cont a.ps {border-radius: 80px 0px 0px 80px; padding-left:4px;}
.pro_view .fsize_cont a.ps::before {content:'\e145';}
.pro_view .reset_cont {margin-left:10px;}
.pro_view .reset_cont a {display:flex; flex-wrap:wrap; align-items:center; gap:2px; color: var(--black); font-size: 0.7894rem; font-weight: 400; line-height:166.667%; letter-spacing: -0.3px;}
.pro_view .reset_cont a i {display:block; font-style:normal; text-decoration:unset !important;}
.pro_view .reset_cont a i::before {content:'\f053'; color:var(--basic); font-size:1.1578rem; font-family:var(--icon); line-height:1; display:block; text-decoration:unset !important;}


.pro_top {width:100%; display: flex; gap: 60px; align-items: flex-start; margin: 0 0 100px;}

.pro_view_img {width: 55%; max-width: 775px; flex-shrink: 0; display: flex; gap: 5px; height: 645px;}
.pro_view_img img {max-width: 100%; max-height: 100%;}
.pro_view_img .noimg img {mix-blend-mode: luminosity;}

.pro_view_img_big {width: 85%; max-width: 645px; position: relative; border:1px solid var(--border);}
.pro_view_img_big .swiper {height: 100%;}
.pro_view_img_big .swiper-slide {display: flex; align-items: center; justify-content: center; height: auto;}
.pro_view_img_big .swiper-slide img {width: 100%; max-height: 100%; object-fit: cover;}

.pro_view_thumb .swiper {height: 100%;}
.pro_view_thumb .swiper-wrapper {height: 100%;}
.pro_view_thumb .swiper-slide {display: flex; align-items: center; justify-content: center; cursor: pointer;}
.pro_view_thumb .swiper-slide::after {position: absolute; top: 0; left: 0; width: calc(100% - 2px); height: calc(100% - 2px); content: ''; border: 1px solid var(--border);}
.pro_view_thumb .swiper-slide.swiper-slide-thumb-active::after {border-color: var(--main);}

.pro_view_img .arrows {display: flex; gap: 4px; position: absolute; bottom: 30px; right: 20px;}
.pro_view_img .arrows > div {position: static; margin-top: 0; width: 54px; height: 54px; color: var(--white); background:#ccc; border-radius:var(--borderAll); border:1px solid #ccc; transition:all 0.3s linear;}
.pro_view_img .arrows > div::after {display: none;}
.pro_view_img .arrows > div::before {font-size: 28px; line-height: 1; font-family: var(--icon); font-weight: 400; transition:all 0.3s linear;}
.pro_view_img .arrows > div:hover {background:var(--white); border-color:var(--main); color:var(--main);}
.pro_view_img .arrows > div.swiper-button-prev::before {content: 'chevron_backward';}
.pro_view_img .arrows > div.swiper-button-next::before {content: 'chevron_forward';}


.pro_top .pro_txt {flex:1;}
.pro_top .pro_txt .prdname {display:block; color:var(--black); font-weight:700;}
.pro_top .pro_txt .prd_txt {display: block; padding:10px 0 0 0;}
.pro_top .pro_txt .shortexp {display:block; color:var(--basic); font-weight:400; padding:30px 0 0;}
.pro_top .pro_txt hr {display:block; width:100%; height:0px; border:0; border-top:1px solid var(--border); margin: 30px 0 0 0;}

.pro_top .pro_txt .pro_info {margin: 30px 0 0; padding:30px 25px; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--grayBg);}
.pro_top .pro_txt .pro_info ul li {display:flex; padding:0 0 10px 15px; box-sizing:border-box; position:relative;}
.pro_top .pro_txt .pro_info ul li::before {position:absolute; left:0; top:11px; width:3px; height:3px; border-radius:100%; background:var(--main); content:""; z-index:5;}
.pro_top .pro_txt .pro_info ul li:last-child {padding-bottom: 0 !important;}
.pro_top .pro_txt .pro_info ul li .tit {min-width:160px; margin-right:10px; box-sizing:border-box; color:var(--black);}
.pro_top .pro_txt .pro_info ul li p {flex:1 0 0;}

.pro_top .pro_txt .pro_file {padding:25px; border-bottom:1px solid var(--border);}
.pro_top .pro_txt .pro_file ul li {display:flex; padding:0 0 10px 0; box-sizing:border-box; position:relative;}
.pro_top .pro_txt .pro_file ul li:last-child {padding-bottom: 0 !important;}
.pro_top .pro_txt .pro_file ul li .tit {width:135px; box-sizing:border-box; color:var(--black);}
.pro_top .pro_txt .pro_file ul li p {position:relative; padding-left:25px; flex:1;}
.pro_top .pro_txt .pro_file ul li p::before {position:absolute; left:0; top:5px; z-index:5; width:20px; height:20px; line-height:1; font-size:20px; color:#1C1B1F; content:"download"; font-family:var(--icon); z-index:5;}

.pro_top .pro_txt .upfile2 {position:relative; padding-left:25px; color:var(--black); margin-top:20px;}
.pro_top .pro_txt .upfile2::before {position:absolute; left:0; top:0; z-index:5; width:20px; height:20px; font-size:20px; line-height:1.5; color:#1C1B1F; content:"download"; font-family:var(--icon); z-index:5;}

.pro_top .pro_txt .pro_btn {padding: 30px 0 0; display: flex; justify-content:flex-end;}
.pro_top .pro_txt .pro_btn a {display: inline-flex; align-items:center; justify-content:center; gap:0 10px; width:140px; height: 56px; box-sizing:border-box; border:1px solid var(--black); transition:all .3s linear; font-size:1rem; letter-spacing: var(--letter-spacing-button); font-weight: 500; border-radius:var(--borderAll); padding:0 30px 0 25px; color:var(--black);}
.pro_top .pro_txt .pro_btn a::before{display: inline-block; color:var(--black); font-size:24px; margin: 0 10px 0 0; font-family:var(--icon); transition:all .3s linear;}
.pro_top .pro_txt .pro_btn a.listBtn:before{content:'\e5d2';}
.pro_top .pro_txt .pro_btn a.listBtn:hover {border-color:var(--main); background:var(--main); color:var(--white);}
.pro_top .pro_txt .pro_btn a.listBtn:hover::before {color:var(--white);}

.pro_view_contents_tit {display: flex; gap: 20px; align-items: center; margin-bottom: 40px;}
.pro_view_contents_tit h5 {color:var(--black); background:var(--white);}
.pro_view_contents_tit::after {flex: 1; border-bottom: 1px solid var(--black); opacity: 0.2; content: '';}

.pro_content {padding: 0 0 60px;}
.pro_content img {max-width:100%; height: auto !important;}

.dep_tit {color:var(--black); font-weight:600; margin-bottom:20px;}
.dep_cont {margin-bottom:60px;}

.movie_wrap {position:relative; padding-bottom:56.25%;}
.movie_wrap iframe {position:absolute; left:0; top:0; width:100%; height:100%; z-index:2;}


/**** 테이블 스타일 ****/
.table_wrap {padding-bottom:20px; width:100%;}
.table_style {width:100%; border:0; border-spacing:0; border-collapse:separate; border-top:1px solid var(--black); border-left:1px solid var(--border);}
.table_style col.th {width:200px;}
.table_style col.td {width:calc(100% - 200px);}
.table_style th {background:var(--grayBg); color:var(--black); padding:15px; border-right:1px solid var(--border); border-bottom:1px solid var(--border); font-weight:500; line-height:1.3; letter-spacing:-.35pt; font-size:1rem;}
.table_style td {border-bottom:1px solid var(--border); background:var(--white); border-right:1px solid var(--border); padding:15px; font-weight:400; font-size:1rem;}
.table_style td.cen {text-align:center;}
.table_style td.tt {font-weight:600; color:var(--black);}
.table_style td strong {color:var(--black);}


/* 관련제품 */
.pro_roll {position: relative; width: calc(100% + 30px); margin: 0 -15px;}
.pro_roll:after{content:''; display:block; clear:both;}
.pro_roll figure {padding: 0 15px;}
.pro_roll figure a {display:block;}
.pro_roll figure dl dt {position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--borderR20); transition:all .3s linear;}
.pro_roll figure dl dt img{width:100%; background-repeat:no-repeat; background-position:center; background-size:contain; transition:all .3s linear;}
.pro_roll figure dl dt::after {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; line-height:1; width:50px; height:50px; border-radius:var(--borderAll); background:var(--main); opacity:0; transition:all 0.3s ease-out; content:"feature_search"; color:var(--white); font-family:var(--icon); font-size:24px;}
.pro_roll figure a:hover dl dt {border-color:var(--main);}
.pro_roll figure a:hover dl dt::after {opacity:1;}
.pro_roll figure dl dd {padding-top:30px; box-sizing:border-box; text-align:center;}
.pro_roll figure dl dd .title {font-weight:700; color:var(--black); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.pro_roll figure dl dd .multiple {height:100%; max-height:3rem; margin:10px 0 0; 
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; /* 보여줄 최대 줄 수 (2줄) */
  overflow: hidden; text-overflow: ellipsis;}

.pro_roll .slick-arrow {position:absolute; text-indent:-33333333px; padding:0; outline:none; cursor:pointer; transition:all .3s linear; z-index: 10; opacity: 1; top:-86px; width: 54px; height: 54px; color: var(--white); background:#ccc; border-radius:var(--borderAll); border:1px solid #ccc; transition:all 0.3s linear;}
.pro_roll .slick-arrow::before {width:100%; height:100%; position:absolute; left:0; top:0; font-family:var(--icon); color:var(--white); text-indent:0; font-size:24px; display:flex; align-items:center; justify-content:center; z-index:20; transition:all 0.3s linear;}
.pro_roll .slick-arrow:hover {background:var(--white); border-color:var(--main);}
.pro_roll .slick-arrow:hover::before {color:var(--main);}

.pro_roll .slick-prev {right:60px;}
.pro_roll .slick-next {right:0;}
.pro_roll .slick-prev::before {content: 'chevron_backward';}
.pro_roll .slick-next::before {content: 'chevron_forward';}



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

.pro_top {gap: 30px; margin: 0 0 80px;}
.pro_view_img {height: 550px;}
.pro_view_img .arrows {bottom: 20px;}



}



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

/* 카테고리 */
.cate_con {margin: 0 auto 40px;}
.cate_con ul li a{min-width:140px; padding:0 20px; line-height:53px; height: 55px;}

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


/* 뷰 */
.pro_top {flex-direction: column; gap:50px 0; margin: 0 0 50px; }
.pro_view .pro_view_option {position: relative; top:auto; right:auto; margin-bottom:20px;}
.pro_view_img {width: 100%; flex-direction: column-reverse; max-width: 100%; height: auto;}
.pro_view_img > div {width: 100%; max-width: 100%;}
.pro_view_thumb .swiper {height: auto;}
.pro_view_thumb .swiper-wrapper {height: auto;}
.pro_view_thumb .swiper-slide {height: auto;}
.pro_view_img .arrows {bottom: 20px;}
.pro_view_img .arrows > div {width: 45px; height: 45px;}
.pro_view_img .arrows > div::before {font-size: 24px;}

.pro_top .pro_txt {width:100%;}
.pro_top .pro_txt .shortexp {padding:20px 0 0;}
.pro_top .pro_txt .pro_info {padding:20px 15px;}
.pro_top .pro_txt .pro_info ul li {display:flex; padding:0 0 10px 12px; box-sizing:border-box; position:relative;}

.pro_top .pro_txt .pro_file {padding:20px 15px;}
.pro_top .pro_txt .pro_file ul li {padding:0 0 8px 0;}
.pro_top .pro_txt .pro_file ul li .tit {width:95px;}
.pro_top .pro_txt .pro_file ul li p {padding-left:22px;}
.pro_top .pro_txt .pro_file ul li p::before {top:4px; width:18px; height:18px;  font-size:18px;}

.pro_top .pro_txt .upfile2 {padding-left:22px; margin-top:15px;}
.pro_top .pro_txt .upfile2::before {width:18px; height:18px; font-size:18px;}

.pro_top .pro_txt .pro_btn a {gap:0 10px; width:125px; height: 50px; padding:0 25px 0 20px;}
.pro_top .pro_txt .pro_btn a::before {font-size:20px; margin: 0 5px 0 0;}

.pro_view_contents_tit {gap: 15px; margin-bottom: 30px;}


/* 관련제품 */
.pro_roll {width: calc(100% + 20px); margin: 0 -10px;}
.pro_roll figure {padding: 0 10px;}
.pro_roll figure dl dd {padding-top:20px;}
.pro_roll figure dl dd .multiple{margin:6px 0 0;}

.pro_roll .slick-arrow {top:-76px;}



}


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

/* 카테고리 */
.cate_con {margin: 0 auto 20px; padding:0 30px; display:block; position:relative;}
.cate_con:before{content:''; display:block; box-sizing:border-box; width:100%; height:100%; border:1px solid var(--border); position:absolute; left:0; bottom:0;}
.cate_con ul{display:block; white-space:nowrap; text-align:center; font-size:0;}
.cate_con ul li{float:none; display:inline-block; margin:0; width: auto; padding:0 10px;}
.cate_con ul li a{min-width:auto; line-height:120%; height: auto; padding:12px 0; border-radius:0; border:0;}
.cate_con ul li a:after{content:''; display:block; width:0; height:2px; background:var(--main); position:absolute; left:0; bottom:0; z-index:2; transition:all .3s linear;}
.cate_con ul li.hover a {background:transparent !important; color:var(--main) !important; font-weight:700;}
.cate_con ul li.hover a:after{width:100%;}
.cate_con ul li.imgBn img {display:none;}
.cate_con ul li.imgBn span {position:relative; text-indent:0; opacity:1; line-height:1;}
.cate_con ul li.imgBn.hover a {background:transparent !important;}
.cate_con ul li.imgBn.hover a::after {top:auto; border-radius:0; border:0; height:2px;}


/* 리스트 */
.pro_list figure {width:calc((100% - 20px) / 2);}
.pro_list dl dd {padding-top:20px;}
.pro_list dl dd .multiple {margin:6px 0 0;}


/* 검색 */
.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_top {gap:40px 0; margin: 0 0 40px; }
.pro_view_img .arrows {bottom: 10px; right: 10px;}
.pro_view_img .arrows > div {width: 40px; height: 40px;}

.pro_top .pro_txt .prd_txt {padding:7px 0 0 0;}
.pro_top .pro_txt hr {margin: 20px 0 0 0;}
.pro_top .pro_txt .pro_info ul li {flex-wrap:wrap; gap:3px 0; padding: 0 0 8px 10px;}
.pro_top .pro_txt .pro_info ul li::before {top:8px; }
.pro_top .pro_txt .pro_info ul li .tit {min-width:100%; width:100%; margin-right:0;}
.pro_top .pro_txt .pro_info ul li p {width:100%;}

.pro_top .pro_txt .pro_file ul li p::before {top: 2px; width: 16px; height: 16px; font-size: 16px;}
.pro_top .pro_txt .upfile2 {padding-left: 20px;}
.pro_top .pro_txt .upfile2::before {width: 16px; height: 16px; font-size: 16px;}

.pro_top .pro_txt .pro_btn a {gap:0 5px; width:110px; height: 45px; padding:0 20px 0 15px;}
.pro_top .pro_txt .pro_btn a::before {font-size:20px; margin: 0 5px 0 0;}


/* 관련제품 */
.pro_roll figure dl dd {padding-top:15px;}
.pro_roll figure dl dd .multiple{margin:4px 0 0;}

.pro_roll .slick-arrow {top:-68px; width: 44px; height: 44px; }
.pro_roll .slick-arrow::before {font-size:20px;}
.pro_roll .slick-prev {right:50px;}


/**** 테이블 스타일 ****/
.table_style col.th {width:110px;}
.table_style col.td {width:calc(100% - 110px);}
.table_style th {padding:10px;}
.table_style td {padding:10px;}

.dep_tit {margin-bottom:15px;}
.dep_cont {margin-bottom:40px;}

}

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


/* 리스트 */
.pro_list {gap:30px 0;}
.pro_list figure {width:100%;}


}