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

/* 카테고리 */
.cate_con {margin: 0 auto 50px}
.cate_con ul {display: flex; justify-content:center; gap:0 5px; height:62px;}
.cate_con ul li {flex:1 1 auto; width:calc((100% - 20px) / 5); height:100%; margin:0;}
.cate_con ul li a {display:flex; align-items:center; justify-content:center; width:100%; height: 100%; border-radius:var(--borderR10); box-sizing:border-box; padding:5px 10px; text-align:center; border:1px solid var(--border); font-size:1rem; letter-spacing: var(--letter-spacing-button); font-weight: 400; color:var(--basic); transition:all .3s; }
.cate_con ul li a:hover {color:var(--main); border-color:var(--main);}
.cate_con ul li.hover a {background:var(--main) !important; border-color:var(--main) !important; color:var(--white) !important;}

/* 리스트 */
.pro_list {display:flex; flex-wrap:wrap;}
.pro_list figure {margin:40px 30px 0 0; width:calc((100% - 60px)/3);}
.pro_list figure:nth-child(3n) {margin-right: 0;}
.pro_list figure:nth-child(-n+3) {margin-top: 0;}
.pro_list figure a {display:block;}
.pro_list figure dl dt {overflow: hidden; aspect-ratio: 1 / 1; border:1px solid var(--border); box-sizing:border-box; border-radius:var(--borderR30);}
.pro_list figure dl dt img{display: block; width: 100%; height: 100%; object-fit: cover; transition:all .3s linear;}
.pro_list figure:hover dl dt img {transform:scale(1.1); transition:all .3s linear;}
.pro_list figure dl dd {padding-top:30px; text-align:center;}
.pro_list figure dl dd .title {font-weight:600; color:var(--black);}
.pro_list figure dl dd .fs18 {margin-top:5px;}


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


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

.pro_top .proImg_roll .slick-arrow {position:absolute; right:20px; 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 {bottom:75px;}
.pro_top .proImg_roll .slick-prev::after {content:"\ef7d";}
.pro_top .proImg_roll .slick-next {bottom:20px;}

.pro_top .pro_img .thum_list {width:120px; box-sizing:border-box; padding: 0 10px 0 0; overflow: hidden;}
.pro_top .proImg_nav .slick-list{overflow:visible;}
.pro_top .proImg_nav .slick-track{display: block;}
.pro_top .proImg_nav .roll {cursor:pointer; margin: 0 0 5px; border:1px solid var(--border); border-radius:var(--borderR10); overflow:hidden;}
.pro_top .proImg_nav .roll .img{position:relative; aspect-ratio: 1 / 1; overflow: hidden;}
.pro_top .proImg_nav .roll .img::after {content:''; display:block; box-sizing:border-box; position:absolute; left:0; top:0; transition:all .3s linear; border:3px solid var(--sub); width: 100%; height:100%; opacity: 0;}
.pro_top .proImg_nav .roll.slick-current .img:after {opacity: 1;}
.pro_top .proImg_nav .roll img {display: block; width: 100%; height: 100%; min-height:100%; object-fit: contain;}

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

.pro_top .pro_txt {width:calc(50% - 30px); box-sizing:border-box;}
.pro_top .pro_txt .prdnum {display: block; font-family:var(--eng); color:var(--main); padding:0 0 8px;}
.pro_top .pro_txt .prdname {display:block; color:var(--black); font-weight:700;}
.pro_top .pro_txt .shortexp {display:block; color:var(--basic); font-weight:400;}
.pro_top .pro_txt .pro_info {margin: 30px 0 0; padding:25px 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 {position:relative; display:flex; padding-bottom:8px; box-sizing:border-box; padding-left:12px;}
.pro_top .pro_txt .pro_info ul li::before {position:absolute; left:0; top:12px; width:4px; height:4px; border-radius:100%; content:""; z-index:5; background:#576775; opacity:0.35;}
.pro_top .pro_txt .pro_info ul li:last-child {padding-bottom: 0;}
.pro_top .pro_txt .pro_info ul li .tit {display:inline-block; color:var(--black); letter-spacing:var(--letter-spacing-caption); margin-right:5px; font-weight:600;}
.pro_top .pro_txt .pro_info ul li p {flex: 1 1 0; font-size:1rem; letter-spacing:var(--letter-spacing-caption); 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; letter-spacing: var(--letter-spacing-caption); line-height: 150%; color:var(--black);}

.pro_top .pro_txt .pro_btn {padding:50px 0 0; display: flex; justify-content:flex-end;}
.pro_top .pro_txt .pro_btn a {position:relative; display:flex; align-items:center; justify-content:space-between; width:200px; height:65px; box-sizing:border-box; padding:0 10px 0 30px; border-radius:var(--borderRall); overflow:hidden; transition:all .3s linear; border:1px solid var(--main); background:transparent;}
.pro_top .pro_txt .pro_btn a:before {position:absolute; left:0; top:0; width:100%; height:100%; display:block; content:""; z-index:1; background:var(--main);}
.pro_top .pro_txt .pro_btn a span {position:relative; z-index:5; color:var(--white); transition:all .5s linear;}
.pro_top .pro_txt .pro_btn a em {width:45px; height:45px; display:flex; align-items:center; justify-content:center; position:relative; z-index:5; font-style:normal;}
.pro_top .pro_txt .pro_btn a em::after {position:absolute; display:flex; align-items:center; justify-content:center; font-family:var(--icon); color:var(--main); font-size:22px; line-height:1; transition:all .5s linear; z-index:5;}
.pro_top .pro_txt .pro_btn a::after {position:absolute; right:10px; top:50%; transform:translateY(-50%); width:45px; height:45px; border-radius:var(--borderRall); background:var(--white); display:flex; align-items:center; justify-content:center; pointer-events:none; transition:all .5s linear; z-index:2; content:"";}
.pro_top .pro_txt .pro_btn a:hover {padding:0 25px 0 40px;}
.pro_top .pro_txt .pro_btn a:hover span {color:var(--main);}
.pro_top .pro_txt .pro_btn a:hover::after {right:5px; width:calc(100% - 10px); height:calc(100% - 8px); border-radius:var(--borderRall);}

.pro_top .pro_txt .pro_btn a.listBtn em::after {content:'menu'; }
.pro_top .pro_txt .pro_btn a.printBtn em::after {content:'\e8ad';}
.pro_top .pro_txt .pro_btn a.listBtn:hover{border-color:var(--black); color:var(--black);}
.pro_top .pro_txt .pro_btn a.printBtn:hover{background:var(--sub); border-color:var(--sub);}


.datail_info {margin: 0 0 50px; padding: 18px 30px; box-sizing:border-box; background:var(--sub); color:var(--white); border-radius:var(--borderR10); position:relative; display:flex; flex-wrap:wrap; align-items:center; letter-spacing:0; font-weight:700; }
.datail_info::before {width:26px; height:26px; color:var(--white); line-height:1; font-family:var(--icon); font-size:26px; content:"wb_incandescent"; margin:0 10px 0 0; font-weight:400; opacity:0.5;}
.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 dl{padding: 0 15px;}
.pro_roll dl a{display:block;}
.pro_roll dl dt{overflow:hidden;}
.pro_roll dl dt img{width:100%; background-repeat:no-repeat; background-position:center; background-size:contain; transition:all .3s linear;}
.pro_roll dl:hover dt img{transform:scale(1.1); transition:all .3s linear;}
.pro_roll dl dd{padding:20px 0; box-sizing:border-box;}
.pro_roll dl dd .title{font-size:1.125rem; font-weight: 500; color:var(--black); line-height:120%; letter-spacing:var(--letter-spacing-body); text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.pro_roll dl dd .multiple{font-size:1rem; line-height:120%; height:1.4em; letter-spacing:var(--letter-spacing-body); margin:10px 0 0; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}

.pro_roll .slick-arrow{border:0; padding:0; font-size:0; outline:none; cursor:pointer; width:30px; height:30px; transition:all .3s linear; position: absolute; z-index: 9999; opacity: 1; right: 47px; top:-86px;}
.pro_roll .slick-arrow:hover{opacity: 0.5;}
.pro_roll .slick-prev{background:url('/img/arrow_p_w.png') no-repeat center/100% auto; margin-right:50px;}
.pro_roll .slick-next{background:url('/img/arrow_n_w.png') no-repeat center/100% auto;}


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

/* 뷰 */
.pro_top .pro_img {flex-direction:column;}
.pro_top .proImg_roll {width:100%;}
.pro_top .pro_img .thum_list {width:100%; padding:0; margin:7px 0 0 0; position:relative; z-index:9999; display:flex; flex-wrap:wrap; max-width:100%; overflow:visible;}
.pro_top .proImg_nav {width:100%;}
.pro_top .proImg_nav .slick-list {width:calc(100% + 8px); display:flex; flex-wrap:wrap; overflow:hidden;}
.pro_top .proImg_nav .slick-track {display: flex;}
.pro_top .proImg_nav .roll {margin: 0 5px 0 0 ;}

}

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



}

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


/* 카테고리 */
.cate_con {margin: 0 auto 40px}
.cate_con ul {height:52px;}

/* 리스트 */
.pro_list figure {margin:30px 20px 0 0; width:calc((100% - 40px) / 2);}

/* 뷰 */
.pro_top{margin: 0 0 80px;}
.pro_top .pro_img {width:calc(50% - 20px);}
.pro_top .proImg_roll .slick-arrow {right:20px; width:40px; height:40px;}
.pro_top .proImg_roll .slick-arrow::after {width:40px; height:40px; font-size:20px;}
.pro_top .proImg_roll .slick-prev {bottom:65px;}

.pro_top .pro_txt {width:calc(50% - 20px);}
.pro_top .pro_txt .pro_info {margin:25px 0 0; padding:20px 0;}
.pro_top .pro_txt .pro_info ul li {padding-bottom:6px;}
.pro_top .pro_txt .pro_info ul li::before {top:11px; }
.pro_top .pro_txt .pro_info .download_icon {font-size:18px; margin: -4px 5px 0 0;}
.pro_top .pro_txt .pro_info .upfile2 {padding: 20px 0 0;}

.pro_top .pro_txt .pro_btn {padding:40px 0 0;}
.pro_top .pro_txt .pro_btn a {width:185px; height:60px; padding:0 10px 0 25px;}
.pro_top .pro_txt .pro_btn a em {width:40px; height:40px;}
.pro_top .pro_txt .pro_btn a em::after {font-size:20px;}
.pro_top .pro_txt .pro_btn a::after {width:40px; height:40px; }
.pro_top .pro_txt .pro_btn a:hover {padding:0 25px 0 35px;}

.datail_info {margin: 0 0 40px; padding: 15px 25px;}
.datail_info::before {width:24px; height:24px; font-size:24px; margin:0 8px 0 0;}


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

.pro_roll .slick-arrow{width:25px; height:25px; right: 38px; top:-68px;}
.pro_roll .slick-prev{margin-right:40px;}




}
/*******************************************************************************
    @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; height:auto;}
.cate_con ul li {float:none; display:inline-block; margin:0; width: auto; padding:0 10px; height:auto;}
.cate_con ul li a {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 a:hover {border-color:none;}
.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 figure {width:calc((100% - 20px) / 2);}
.pro_list figure:nth-child(3n){margin-right: 20px;}
.pro_list figure:nth-child(2n){margin-right: 0;}
.pro_list figure dl dd{padding-top:20px;}
.pro_list figure:nth-child(-n+3) {margin-top: 30px;}
.pro_list figure:nth-child(-n+2) {margin-top: 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 {flex-direction:column; margin: 0 0 60px;}
.pro_top .pro_img, .pro_top .pro_txt {width:100%;}
.pro_top .pro_img {margin-bottom:30px;}
.pro_top .pro_txt .pro_info {margin:20px 0 0; padding:15px 0;}
.pro_top .pro_txt .pro_info ul li {padding-bottom:4px;}
.pro_top .pro_txt .pro_info ul li::before {top:10px; width:3px; height:3px;}
.pro_top .pro_txt .pro_info .download_icon {font-size:16px; margin: -3px 5px 0 0;}
.pro_top .pro_txt .pro_info .upfile2 {padding:15px 0 0;}
.pro_top .pro_txt .pro_btn {padding:30px 0 0;}
.pro_top .pro_txt .pro_btn a {width:170px; height:55px; padding:0 5px 0 20px;}
.pro_top .pro_txt .pro_btn a em {width:35px; height:35px;}
.pro_top .pro_txt .pro_btn a em::after {font-size:18px;}
.pro_top .pro_txt .pro_btn a::after {right:5px; width:35px; height:35px; }
.pro_top .pro_txt .pro_btn a:hover {padding:0 20px 0 30px;}
.pro_top .pro_txt .pro_btn a:hover::after {right:5px; width:calc(100% - 10px); height:calc(100% - 6px);}

.datail_info {margin: 0 0 30px; padding: 12px 20px;}
.datail_info::before {width:22px; height:22px; font-size:22px; margin:0 6px 0 0;}

/* 관련상품 */
.pro_roll dl dd{padding:12px 0;}
.pro_roll dl dd .multiple{margin:6px 0 0;}

.pro_roll .slick-arrow{right: 30px; top:-54px;}




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

.pro_top {margin: 0 0 40px;}
.pro_top .pro_txt .pro_btn {padding:20px 0 0;}

.pro_top .proImg_roll .slick-arrow {right:15px; width:35px; height:35px;}
.pro_top .proImg_roll .slick-arrow::after {width:35px; height:35px; font-size:18px;}
.pro_top .proImg_roll .slick-prev {bottom:52px;}
.pro_top .proImg_roll .slick-next {bottom:15px;}

.pro_top .pro_txt .pro_btn a {width:150px; height:45px;}
.pro_top .pro_txt .pro_btn a em {width:30px; height:30px;}
.pro_top .pro_txt .pro_btn a em::after {font-size:16px;}
.pro_top .pro_txt .pro_btn a::after {width:30px; height:30px;}
.pro_top .pro_txt .pro_btn a:hover {padding:0 15px 0 25px;}


/* 리스트 */
.pro_list figure{margin:0 0 20px; width:100%;}
.pro_list figure:nth-child(3n), .pro_list figure:nth-child(2n) {margin-right: 0;}
.pro_list figure dl dd{padding-top:15px;}
.pro_list figure:last-child {margin-bottom:0;}
.pro_list figure:nth-child(-n+3), .pro_list figure:nth-child(-n+2) {margin-top: 0;}

}