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

/* 카테고리 */
.cate_con {overflow:hidden; margin: 0 auto 55px; 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;}
.cate_con ul li a{display:inline-block; font-size:1rem; min-width:128px; padding:0 20px; line-height:43px; height: 45px; border-radius:45px; color:var(--basic); box-sizing:border-box; transition:all .3s linear; position:relative; text-align:center; border:1px solid var(--border);}
.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;}

/* 리스트 */
.pro_list {width:100%; display:flex; flex-wrap:wrap;}
.pro_list article {position:relative; margin:30px 30px 0 0; width:calc((100% - 60px) / 3); overflow:hidden; border-radius:var(--borderR30);}
.pro_list article::before {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:-1; border-radius:var(--borderR30); box-sizing:border-box; border:1px solid var(--border);}
.pro_list article a::after {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:3; border:3px solid var(--main); border-radius:var(--borderR30); box-sizing:border-box; opacity:0; transition:all 0.3s linear;}
.pro_list article:nth-child(3n) {margin-right: 0;}
.pro_list article:nth-child(-n+3) {margin-top:0;}
.pro_list article a {display: block;}
.pro_list article dl dt {position:relative; overflow: hidden; aspect-ratio: 1 / 1; padding:1px;}   
.pro_list article dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;  border-radius:30px 30px 0 0;}
.pro_list article a:hover::after {opacity:1;}
.pro_list article dl dd {padding:20px 20px 40px 20px; box-sizing:border-box; text-align:center;}
.pro_list article dl dd .title {color:var(--black); height:1.4em; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; margin-bottom:10px;}
.pro_list article dl dd .multiple {font-weight:400; overflow:hidden; height:100%; max-height:4.8rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; font-weight:normal; }


/* 검색 */
.bbs_search {text-align:center; padding:30px 0 0; font-size:0; }
.bbs_search dl {display:flex; max-width:610px; width:100%; margin:0 auto; gap:0 2px;}
.bbs_search dt {width:200px;}
.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/cat_arrow_bk.svg") no-repeat right 20px center/10px auto; outline:none; cursor:pointer; width:100%; height:60px !important; border-radius:var(--borderR5);}
.bbs_search dd {width:calc(100% - 200px); 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:60px; line-height:58px; box-sizing:border-box; width:calc(100% - 62px); -webkit-appearance: none; -webkit-border-radius: 0; margin-right:2px; border-radius:var(--borderR5);}
.bbs_search dd .bbs_s_b {padding:0; border:0; background:var(--main); outline:none; cursor:pointer; width:60px; height:60px; display:flex; align-items:center; justify-content: center; transition:all .3s linear; border-radius:var(--borderR5);}
.bbs_search dd .bbs_s_b:hover{background:#000;}
.bbs_search dd .bbs_s_b span {font-size:28px; color:var(--white);}


/* 뷰 */
.pro_view {padding-top:100px;}
.pro_top {display:flex; flex-wrap:wrap; justify-content:space-between; margin: 0 0 100px;}
.pro_top > div {box-sizing:border-box; width: calc(50% - 15px);}
.pro_top .proImg_roll {position: relative; max-width:630px;}
.pro_top .proImg_roll::before {position:absolute; left:0; top:0; width:100%; height:100%; z-index:3; background-color:transparent; border:1px solid var(--border); content:""; display:block; border-radius:var(--borderR30); box-sizing:border-box;}
.pro_top .proImg_roll .roll {position:relative; aspect-ratio: 1 / 1; overflow: hidden; box-sizing:border-box; padding:1px; display:flex; align-items:center; justify-content:center;}   
.pro_top .proImg_roll .roll img {display: block; width:calc(100% - 1px); height:calc(100% - 1px); object-fit: cover; max-width:calc(100% - 1px); border-radius:var(--borderR30); }
.pro_top .proImg_roll .roll iframe {position:absolute; left:0; top:0; width:100%; height:100%; z-index:5;}

.pro_top .proImg_roll .slick-arrow {position:absolute; top:50%; right:-25px; width:50px; height:50px; border:none; cursor:pointer; border-radius:100%; background-color:#BEBEBE; text-indent:-222222px; z-index:1010; transition:all 0.5s linear;}
.pro_top .proImg_roll .slick-arrow::after {position:absolute; left:0; top:0; width:50px; height:50px; display:flex; align-items:center; justify-content:center; text-indent:0; color:var(--white); font-size:24px; font-family:var(--icon); content:"\e941";}
.pro_top .proImg_roll .slick-arrow:hover {background-color:var(--main);}
.pro_top .proImg_roll .slick-prev {margin-top:-30px;}
.pro_top .proImg_roll .slick-prev::after {content:"\ef7d";}
.pro_top .proImg_roll .slick-next {margin-top:30px;}

.pro_top .pro_img .thum_list {width:100%; margin:7px 0 0 0; position:relative; z-index:9999; display:flex; flex-wrap:wrap; max-width:630px;}
.pro_top .pro_img .thum_list .slick-list {width:calc(100% + 8px); display:flex; flex-wrap:wrap; overflow:hidden; margin-right:-4px; margin-left:-4px;}
.pro_top .pro_img .thum_list .roll {position:relative; aspect-ratio: 1 / 1; overflow:hidden; box-sizing:border-box; cursor:pointer; background:var(--white); margin:0 4px; max-width:120px; border-radius:var(--borderR20); border:1px solid var(--border); transition:all 0.5s ease-out;}
.pro_top .pro_img .thum_list .roll img {display: block; width: 100%; height: 100%; object-fit: cover; max-width:100%;}
.pro_top .pro_img .thum_list .roll.slick-current {border-color:var(--black);}


@supports (-webkit-touch-callout: none) {
.pro_top .pro_img .thum_list .roll img {
    height: auto !important; /* iOS�먯꽌 height:100%濡� 鍮꾩쑉 怨꾩궛 瑗ъ엫 諛⑹� */
    aspect-ratio: 1/1; /* iOS媛� 而⑦뀒�대꼫 aspect-ratio 臾댁떆 �� ��鍮� */
    object-fit: cover;
  }
}


.pro_top .pro_txt {padding:0 0 0 15px; margin-left:30px;}
.pro_top .pro_txt .prdnum {display: block; font-size:1rem; font-family:var(--eng); color:var(--main); line-height:130%; padding:0 0 8px;}
.pro_top .pro_txt .prdname {display:block; color:var(--black);}

.pro_top .pro_txt .pro_info {margin-top: 30px; padding:30px; background:var(--grayBg); box-sizing:border-box;}
.pro_top .pro_txt .pro_info ul {}
.pro_top .pro_txt .pro_info ul li {position:relative; padding-bottom:8px; box-sizing:border-box; padding-left:12px;}
.pro_top .pro_txt .pro_info ul li::before {position:absolute; left:0; top:11px; width:4px; height:4px; border-radius:100%; content:""; z-index:5; background:var(--main);}
.pro_top .pro_txt .pro_info ul li:last-child {padding-bottom: 0;}
.pro_top .pro_txt .pro_info ul li .tit {display:block; color:var(--black); margin-bottom:5px; font-weight:600;}
.pro_top .pro_txt .pro_info ul li p {font-size:1rem;  word-break:break-all;}
.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; line-height: 150%; color:var(--black);}

.pro_top .pro_txt .shortexp {margin-top: 30px; display:block; color:var(--basic); font-weight:400;}

.pro_top .pro_txt .pro_btn {padding:50px 0 0; display: flex; justify-content:flex-end; }
.pro_top .pro_txt .pro_btn a {display: flex; align-items:center; justify-content:center; width:180px; height:58px; box-sizing:border-box; border:1px solid var(--main); text-align:center; transition:all .3s linear; font-size:16px; color:var(--white); font-weight: 500; border-radius:10rem; background-color:var(--main);}
.pro_top .pro_txt .pro_btn a:before {display: inline-block; font-size:24px; vertical-align: middle; margin-right:10px; font-family: "Material Symbols Outlined";}
.pro_top .pro_txt .pro_btn a.listBtn:before{content:'\e5d2';}
.pro_top .pro_txt .pro_btn a.printBtn:before{content:'\e8ad';}
.pro_top .pro_txt .pro_btn a.listBtn {}
.pro_top .pro_txt .pro_btn a.listBtn:hover{background-color:var(--white); color:var(--main);}
.pro_top .pro_txt .pro_btn a.printBtn {display:none; background:var(--main); border-color:var(--main); color:var(--white);}
.pro_top .pro_txt .pro_btn a.printBtn:hover{background:var(--sub); border-color:var(--sub);}

.datail_info {margin-bottom:30px; border-bottom:1px solid var(--border);}
.datail_info span {position:relative; font-size:1.556rem; font-weight:700;  padding-bottom:20px; color:var(--black); display:inline-block;}
.datail_info span::after {position:absolute; left:0; bottom:-1px; width:100%; height:3px; content:""; z-index:5; background:var(--main);}
.pro_content {padding: 0 0 60px;}
.pro_content img {max-width:100%; height: auto !important;}


/* 관련상품 */
.pro_roll {position: relative; width: calc(100% + 30px); margin: 0 -15px;}
.pro_roll:after {content:''; display:block; clear:both;}
.pro_roll article {position:relative; margin: 0 15px; overflow:hidden; border-radius:var(--borderR30);}
.pro_roll article::before {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:-1; border-radius:var(--borderR30); box-sizing:border-box; border:1px solid var(--border);}
.pro_roll article a::after {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:3; border:3px solid var(--main); border-radius:var(--borderR30); box-sizing:border-box; opacity:0; transition:all 0.3s linear;}
.pro_roll article a {display:block;}
.pro_roll article dl dt {position:relative; overflow: hidden; aspect-ratio: 1 / 1; padding:1px;}   
.pro_roll article dl dt img {display: block; width: 100%; height: 100%; object-fit: cover;  border-radius:30px 30px 0 0;}
.pro_roll article a:hover::after {opacity:1;}
.pro_roll article dl dd {padding:20px 20px 40px 20px; box-sizing:border-box; text-align:center;}
.pro_roll article dl dd .title {color:var(--black); height:1.4em; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; margin-bottom:10px;}
.pro_roll article dl dd .multiple {font-weight:400; overflow:hidden; height:100%; max-height:4.8rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; text-overflow:ellipsis; font-weight:normal; }

.pro_roll .slick-arrow {position:absolute; top:-85px; width:50px; height:50px; border:none; cursor:pointer; border-radius:100%; background-color:transparent; text-indent:-222222px; z-index:1010; transition:all 0.5s linear;}
.pro_roll .slick-arrow::after {position:absolute; left:0; top:0; width:50px; height:50px; display:flex; align-items:center; justify-content:center; text-indent:0; color:var(--basic); font-size:30px; font-family:var(--icon); content:"\ef7d"; transition:all 0.5s linear; opacity:0.7;}
.pro_roll .slick-arrow:hover::after {color:var(--main); opacity:1;}
.pro_roll .slick-prev {right:55px;}
.pro_roll .slick-next {right:0;}
.pro_roll .slick-next::after {content:"\e941";}


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

.pro_top .pro_txt {padding:0 0 0 30px;}


}

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



}

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

/* 카테고리 */
.cate_con {margin: 0 auto 30px;}
.cate_con ul{}
.cate_con ul li a{min-width:100px; padding:0 15px; line-height:38px; height: 40px;}

/* 리스트 */
.pro_list article{margin:20px 20px 0 0; width:calc((100% - 40px)/3);}
.pro_list article dl dt img {border-radius:20px 20px 0 0;}
.pro_list article dl dd {padding:20px 15px 30px 15px;}


/* 뷰 */
.pro_view {padding-top:80px;}
.pro_top {margin: 0 0 80px;}
.pro_top > div {width: calc(50% - 10px);}

.pro_top .pro_img .thum_list {margin:6px 0 0 0;}
.pro_top .pro_img .thum_list .slick-list {width:calc(100% + 6px); margin-right:-3px; margin-left:-3px;}
.pro_top .pro_img .thum_list .roll { margin:0 3px;}

.pro_top .pro_txt {padding:0 0 0 30px; margin-left:0;}
.pro_top .pro_txt .pro_info {margin-top:20px; padding:25px 20px;}
.pro_top .pro_txt .pro_info ul li {flex-direction:column;}
.pro_top .pro_txt .pro_info ul li .tit {margin-right:0;}
.pro_top .pro_txt .shortexp {margin-top:20px;}
.pro_top .pro_txt .pro_btn {padding-top:40px;}
.pro_top .pro_txt .pro_btn a {width: 155px; height: 50px; font-size:15px;}
.pro_top .pro_txt .pro_btn a:before {font-size:22px;}


/* 관련상품 */
.pro_roll {width: calc(100% + 20px); margin: 0 -10px;}
.pro_roll article {margin: 0 10px;}
.pro_roll article dl dt img {border-radius:20px 20px 0 0;}
.pro_roll article dl dd {padding:20px 15px 30px 15px;}

.pro_roll .slick-arrow {top:-80px; width:40px; height:40px;}
.pro_roll .slick-arrow::after {width:40px; height:40px; font-size:28px;}
.pro_roll .slick-prev {right:45px;}


}


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


/* 카테고리 */
.cate_con {margin: 0 auto 20px; padding:0 30px; display:block;}
.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%;}


/* 리스트 */
.pro_list article {margin:10px 10px 0 0; width:calc((100% - 10px)/2);}
.pro_list article:nth-child(3n){margin-right: 10px;}
.pro_list article:nth-child(2n){margin-right: 0;}
.pro_list article:nth-child(-n+3) {margin-top:10px;}
.pro_list article:nth-child(-n+2) {margin-top:0;}
.pro_list article a::after {border-width:2px;}

.pro_list article dl dt img {border-radius:15px 15px 0 0;}
.pro_list article dl dd {padding:15px 15px 20px 15px;}


/* 검색 */
.bbs_search {padding:20px 0 0;}
.bbs_search dt {width: 100px;}
.bbs_search dt select {height:45px !important; padding:0 10px; background-position:right 10px center;}
.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;}
.bbs_search dd .bbs_s_b span {font-size:24px;}


/* 뷰 */
.pro_view {padding-top:60px;}
.pro_top{margin: 0 0 40px;}
.pro_top > div {width: 100%;}
.pro_top .proImg_roll {max-width:100%;}
.pro_top .proImg_roll .slick-arrow {right:15px; top:auto; bottom:15px; width:40px; height:40px;}
.pro_top .proImg_roll .slick-arrow::after {width:40px; height:40px; font-size:20px;}
.pro_top .proImg_roll .slick-prev {margin-top:0; right:60px;}
.pro_top .pro_img .thum_list {max-width:100%;}
.pro_top .pro_img .thum_list .roll {max-width:100%;}

.pro_top .pro_txt {padding:30px 0 0;}
.pro_top .pro_txt .pro_info {margin-top:15px; padding: 20px 15px;}
.pro_top .pro_txt .pro_info ul li::before {top:8px; width:3px; height:3px;}
.pro_top .pro_txt .shortexp {margin-top:15px;}
.pro_top .pro_txt .pro_btn {padding-top:30px;}
.pro_top .pro_txt .pro_btn a {width: 137px; height:44px; font-size:14px;}
.pro_top .pro_txt .pro_btn a:before {font-size:20px;}

.datail_info {margin-bottom:20px;}
.datail_info span {font-size:1.256rem; padding-bottom:10px;}
.datail_info span::after {height:2px;}



/* 관련상품 */
.pro_roll {width: calc(100% + 10px); margin: 0 -5px;}
.pro_roll article {margin: 0 5px;}
.pro_roll article dl dt img {border-radius:15px 15px 0 0;}
.pro_roll article dl dd {padding:15px 15px 20px 15px;}

.pro_roll .slick-arrow {top:-60px; width:36px; height:36px;}
.pro_roll .slick-arrow::after {width:36px; height:36px; font-size:26px;}
.pro_roll .slick-prev {right:41px;}


}


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


/* 리스트 */
.pro_list article {margin:10px 0 0; width:100%;}
.pro_list article:nth-child(3n){margin-right: 0;}
.pro_list article:nth-child(2n){margin-right: 0;}
.pro_list article:nth-child(-n+2) {margin-top:10px;}
.pro_list article:first-child {margin:0;}


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




}