/* product - list */
.productPage, .productPage form { width:100%; } 
.productPage .list { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; } 
.productPage .list >li { width:24%; margin-right:1.33333333333%; margin-bottom:40px; border:1px solid #ebebeb; box-sizing:border-box; border-radius:10px; position:relative; overflow:hidden; } 
.productPage .list >li:nth-child(4n) { margin-right:0px; } 
.productPage .list >li a { width:100%; height:100%; } 
.productPage .list >li:hover { border:1px solid #2b68e5; box-shadow:5px 5px 10px rgba(0,0,0,0.1); } 
.productPage .list .logo,
.productPage .list .imgBox { width:100%; height:220px; margin-right:8%; background-color:#fcfcfc; border-bottom:1px solid #ebebeb; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background-size:cover; background-position:center; background-repeat:no-repeat; background-size:cover; background-position:center; background-repeat:no-repeat;} 
.productPage .list .logo img { max-width:90%;} 
.productPage .list .imgBox img { max-width:100%; } 
.productPage .list .textBox { width:calc(100% - 50px); padding:25px 25px; } 
.productPage .list .title { height:75px; width:100%; } 
.productPage .list .title p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:18px; font-weight:600; color:#000000; } 
.productPage .list .title02 .desc { font-size:14px; font-weight:300; color:#888888; margin-bottom:3px; } 
.productPage .list .title02 p { width:100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } 

.list .cate { width:76px; height:24px; line-height:22px; border-radius:12px; background-color:#93d3ff; font-size:14px; font-weight:600; color:#ffffff; text-align:center; margin-bottom:8px; } 
.list .cateTit, .list .cateTxt { display:flex; flex-direction:row; align-items:flex-start; font-size:14px; font-weight:300; color:#888888; margin-bottom:3px; } 
.list .cateTit span, .list .cateTxt span { padding-right:3px; line-height:1; } 
.productPage .list li ul,
.productCate .list li ul { margin-left:9px; } 
.productCate .cate { width:76px; height:24px; line-height:22px; border-radius:12px; background-color:#93d3ff; font-size:14px; font-weight:600; color:#ffffff; text-align:center; margin-bottom:8px; } 
.productCate .cateTit { display:flex; flex-direction:row; align-items:flex-start; font-size:14px; font-weight:300; color:#888888; margin-bottom:3px; } 
.productCate .cateTit span, .productCate .cateTxt span { padding-right:3px; line-height:1; } 

.productPage .list .addList, .productView02 .thumBox button { position:absolute; top:17px; right:17px; width:45px; height:45px; border-radius:50%; background-color:#d6d6d6; display:flex; flex-direction:column; justify-content:center; align-items:center; } 
.productPage .list .addList i, .productView02 .thumBox button i { font-size:30px; cursor: pointer; } 
.productPage .list .addList:hover, .productView02 .thumBox button:hover { background-color:#ccc; } 
.productPage .list .addList .xi-heart-o { color:#fff; } 
.productPage .list .addList .xi-heart { color:#2b68e5; } 

/* product - view */
.productView { padding:75px 0 80px 0; } 
.productView .TopTitle { margin-bottom:35px; line-height:1; width:100%; } 
.productView .TopTitle button { border-radius:17px; border:2px solid #2b68e5; box-sizing:border-box; color:#2b68e5; background-color:#fff; font-size:18px; font-weight:500; line-height:1; padding:5px 18px 6px 18px; margin-right:10px; } 
.productView .TopTitle button i { color:#2b68e5; font-weight:500; } 
.productView .TopTitle button.active i:before { content: "\ea10"; } 
.productView .TopTitle button.active { background-color:#2b68e5; border:2px solid #2b68e5; color:#fff; } 
.productView .TopTitle button.active i { color:#fff; } 
.productView .TopTitle p { font-size:36px; font-weight:700; width:calc(100% - 140px); } 
.productView .thumBox { width:400px; height:300px; margin-right:50px; border-radius:10px; overflow:hidden; border:1px solid #ebebeb; box-sizing:border-box; display:flex; flex-direction:row; justify-content:center; align-items:center; background-size:cover; background-repeat:no-repeat; background-position:center;}  
.productView .thumBox img { max-width:100%;} 
.productView .companyInfo { display:flex; width:100%; } 
.productView .companyInfo .textWrap { width:calc(100% - 450px); margin-bottom:13px; } 
.productView .companyInfo .topList li:not(:last-child) { margin-bottom:10px; } 
.productView .companyInfo dl { display:flex; flex-direction:row; align-items:center; } 
.productView .companyInfo dl dt { width:92px; font-size:18px; font-weight:600; color:#000; } 
.productView .companyInfo dl dd p,
.productView .companyInfo dl dd a { font-size:16px; font-weight:300; color:#000; text-decoration: none;} 
.productView .companyInfo dl dd { width:calc(100% - 102px); } 
.productView .pageNum { font-size:18px; font-weight:600; color:#000; margin-bottom:13px; } 
.productView .pageNum .num { font-weight:300; color:var(--color01); } 
.productView .editArea { margin-bottom:45px; } 
.productView .editArea strong { display:block; font-size:22px; font-weight:600; color:#000000; margin-bottom:20px; line-height:1; } 
.productView .editArea p { font-size:18px; font-weight:300; color:#888888; line-height:1.5; min-height: 150px;} 
.productView .editArea iframe { display:block; margin:65px auto 30px auto; text-align:center; } 
.productView .line { width:100%; height:1px; background-color:#ebebeb; margin:45px auto 45px auto; } 
.productView .moveBox { margin-top:55px; padding:30px 0; border-top:1px solid #ebebeb; border-bottom:1px solid #ebebeb; box-sizing:border-box; display:flex; flex-direction:row; align-items:center; justify-content:space-between; } 
.productView .moveBox .arrow { width:calc(50% - 100px); } 
.productView .moveBox .arrow a { width:100%; } 
.productView .moveBox .arrow a { display:flex; flex-direction:row; align-items:center; } 
.productView .moveBox .arrow a i { font-size:30px; color:#e5e5e5; } 
.productView .moveBox .arrow dl { padding:0 20px; width:calc(100% - 40px); } 
.productView .moveBox .arrow dl dt { font-size:14px; font-weight:300; color:#2b68e5; padding-bottom:5px; } 
.productView .moveBox .arrow dl dd { width:90%; font-size:20px; font-weight:400; color:#000000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 
.productView .moveBox .arrow a:hover i,
.productView .moveBox .arrow a:hover dd { color:var(--color01); } 
.productView .moveBox .arrow a:hover dt { color:#111; } 
.productView .moveBox .lfArr { text-align:left; } 
.productView .moveBox .rtArr { text-align:right; } 
.productView .moveBox .rtArr dd { margin-left:10%; } 
.productView .moveBox button { width:200px; height:45px; line-height:45px; border-radius:22px; text-align:center; background-color:#32302f; font-size:24px; font-weight:500; color:#fff; } 
.productView .moveBox button:hover { background-color:var(--color01); } 
.productView .moveBox button i { position:relative; top:1px; } 

.productView02 .thumBox { background-color:#fcfcfc; position:relative; } 
.productView02 .thumBox button { top:auto; right:20px; bottom:20px; } 
.productView02 .thumBox button i { color:#fff; position:relative; top:-1px; } 
.productView02 .companyInfo dl dt { width:175px; } 
.productView02 .companyInfo dl dd { width:calc(100% - 175px); } 
.productView02 .companyInfo .textWrap { margin-bottom:0; height:300px; display:flex; flex-direction:column; justify-content:space-between; position:relative; } 
.productView02 .companyInfo .topList { padding-top:20px; } 
.productView02 .companyInfo .productCate { padding-bottom:12px; } 
.productView02 .companyInfo .detailBtn { position:absolute; bottom:-12px; right:0; } 
.productView02 .companyInfo .detailBtn a { display:block; width:180px; height:34px; line-height:34px; border-radius:17px; background-color:#333; font-size:18px; font-weight:500; color:#fff; text-align:center; } 
.productView02 .companyInfo .detailBtn a:hover {background-color:var(--color01);}
.productView02 .companyInfo .detailBtn i { color:#ebebeb; font-size:19px; position:relative; top:1px; display:inline-block; } 

/* list - 제품 */
.productList .topTit { font-size:30px; font-weight:500; color:#999999; padding-bottom:15px; border-bottom:2px solid #ebebeb; box-sizing:border-box; } 
.productToggleWrap { display:flex; flex-direction:row; align-items:flex-start; } 
.productToggle { width:320px; margin-right:40px; } 
.productToggle .cateList { background-color:#f9f9f9; padding:25px 13px; border-bottom:1px solid #ebebeb; box-sizing:border-box; } 
.productToggle li .tit { height:50px; display:flex; flex-direction:column; justify-content:center; border-bottom:1px solid #ebebeb; box-sizing:border-box; padding-left:13px; cursor:pointer; } 
.productToggle li .tit p { font-size:16px; font-weight:500; color:#000000; } 
.productToggle li .tit.active { background-color:#2b68e5; } 
.productToggle li .tit.active p { color:#fff; } 
.productToggle li .cateList { display:none; } 
.productToggle li.active .cateList { display:block; } 
.productToggle li .cateList li a { font-size:15px; font-weight:300; color:#666; line-height: 24px;} 
.productToggle li .cateList li a.on { font-weight:400; color:var(--color01); } 
.productToggle li .cateList li a:hover { color:#0045da; } 
.productToggle li .cateList li { margin-bottom:3px; } 
.productToggle li .cateList > ul >li:last-child { margin-bottom:0; } 
.productToggle li .cateList li ul { margin-left:15px; margin-top:3px; } 
.productToggle li .cateList li ul img { position:relative; top:-3px; } 
.productList .listWrap { width:calc(100% - 360px); }
.productList .listWrap >div {width:100%;} 
.productList .listWrap .lfBox {width:90%;}
.productList .list { width:100%; } 
.productList .list >li { width:32.5%; margin-right:1.25%; } 
.productList .list >li:nth-child(4n) { margin-right:1.25%; } 
.productList .list >li:nth-child(3n) { margin-right:0; } 
.productList .cateArea { width:80%; flex-wrap:wrap; } 
.productList .cateArea .text { font-size:20px; line-height:1; } 
.productList .cateArea .text01 { color:#000000; font-weight:300; } 
.productList .cateArea .text02 { color:#2b68e5; font-weight:600; } 
.productList .cateArea .text02 .arrow { color:#000000; font-weight:300; display:inline-block; padding:0 5px; } 

#filterBtn { display:none; font-size:17px; font-weight:500; color:#fff; width:94px; height:40px; border-radius:30px; background-color:var(--color01); margin-right:15px; } 
#filterClose { display:none; } 

@media screen and (max-width:1400px) { /* 뷰 */
 .productView .editArea iframe { width:516px !important; height:315px !important; } 
 }
@media screen and (max-width:1280px) { /* 리스트 */
 .productPage .list >li,
 .productList .list >li { width:49%; margin-right:2%; } 
 .productPage .list >li:nth-child(2n) { margin-right:0; } 
 .productPage .list .logo img { width:60%; } 
 .productView02 .companyInfo .detailBtn { position:relative; display:flex; flex-direction:column; justify-content:end; align-items: end; } 
 }
@media screen and (max-width:1024px) { /* 리스트 */
 .productToggle { width:280px; margin-right:20px; } 
 .productList .listWrap { width:calc(100% - 300px); } 
 /* 뷰 */
 .productView .thumBox { width:350px; margin-right:30px; } 
 .productView .companyInfo .textWrap { width:calc(100% - 380px); } 
 .productView .TopTitle { align-items:flex-start; } 
 .productView .TopTitle p { font-size:31px; } 
 .productView .companyInfo dl { align-items:flex-start; } 
 .productView .companyInfo dl dt { font-size:16px; } 
 .productView .companyInfo dl dt { width:85px; } 
 .productView .companyInfo dl dd { width:calc(100% - 85px); } 
 .productView02 .companyInfo dl dt { width:142px; } 
 .productView02 .companyInfo dl dd { width:calc(100% - 142px); } 
 .productView .moveBox { flex-wrap:wrap; padding:0; border:none; } 
 .productView .moveBox .arrow { width:50%; height:35px; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; padding:30px 0; } 
 .productView .moveBox .lfArr { order:1; position:relative; } 
 .productView .moveBox .lfArr::after { content:''; position:absolute; top:50%; transform:translateY(-50%); background-color:#ebebeb; right:0; width:1px; height:70%; } 
 .productView .moveBox .rtArr { order:2; } 
 .productView .moveBox button { order:3; margin:55px auto 0 auto; } 
 .productView .moveBox .arrow dl dd { font-size:16px; } 
 .productView .moveBox .arrow dl { padding:0 15px; width:calc(100% - 50px); } 
 .productView .moveBox .arrow a i { font-size:24px; } 
 }
@media screen and (max-width:980px){
 #filterBtn { display:block; } 
 #filterClose { display:block; height:auto; line-height:1; position:absolute; top:30px; right:30px; background-color:transparent; line-height:1; font-size:30px; color:#000; } 
 #filterClose i { line-height:1; } 
 .productList .listWrap .pageNum { display:none; } 
 .productList .listWrap >div, .productList .listWrap .lfBox { width:100%; } 
 .productList .listWrap .cateArea { width:calc(100% - 93px); } 
 .productToggle { display:none; position:fixed; top:0; left:0; width:100%; background-color:rgba(0,0,0,0.8); z-index:999999999; overflow-y:scroll; height:100vh; } 
 .productToggle.on {display:block;}
 .productToggle .ptWrap {width:90%; height:100vh; background-color:#fff; position:relative;}
 .productToggle::-webkit-scrollbar { width:3px; /* 스크롤바의 너비 */}
 .productToggle::-webkit-scrollbar-thumb { height:1%; background:#d4d4d4;} 
 .productToggle::-webkit-scrollbar-track { background: rgba(33, 122, 244, .1); /*스크롤바 뒷 배경 색상*/}
 .productToggle .ptWrap { background-color:#fff; padding:100px 0; } 
 /* .productToggle .bg { content:''; width:100%; height:100%; background-color:rgba(0,0,0,0.4); position:fixed; top:0; left:0; z-index:-1; }  */
 .productList .topTit { padding-left:30px; } 
 .productToggle li .tit { padding-left:30px; } 
 .productList .listWrap {width:100%;}
}
@media screen and (max-width:830px) { /* 뷰 */
    .productView .TopTitle { display:block; } 
 .productView .TopTitle button { font-size:16px; float:right; margin-right:0; } 
 .productView .TopTitle::after { content:''; display:block; clear:both; } 
 .productView .TopTitle p { font-size:26px; width:100%; margin-bottom:10px; } 
 .productView .TopTitle01 { display:flex !important; flex-direction:column; } 
 .productView .TopTitle01 p { order:1; } 
 .productView .TopTitle01 .favoriteBtnWrap { order:2; width:100%; display:flex; flex-direction:column; justify-content:end; align-items:end; } 
 .productView .TopTitle01 button { float:none; } 
 .productView .companyInfo { display:block !important; } 
 .productView .thumBox { width:100%; margin-right:0; margin-bottom:20px; } 
 .productView .companyInfo .textWrap { width:100%; } 
 .productView .moveBox .arrow dl { padding:0 10px; } 
 .productView02 .companyInfo .topList { padding-top:0; margin-bottom:15px; } 
 .productView02 .companyInfo .productCate { padding-bottom:0; } 
 .productView02 .companyInfo .textWrap { height:auto; } 
 }
@media screen and (max-width:680px) { /* 리스트 */
 .productPage .list >li { width:100%; margin-right:0; margin-bottom:30px; } 
 .productPage .list >li:nth-child(2n) { margin-right:0; } 
 .productPage .list .logo img { width:80%; } 
 .productPage .list .addList { width:40px; height:40px; top:13px; } 
 .productPage .list .addList i { font-size:26px; } 
 .productPage .list .title { height:auto; margin-bottom:35px; } 
 #filterBtn {width:80px; height:36px; font-size:16px; margin-right:8px;}
 .productList .listWrap .cateArea {width:calc(100% - 88px);}
 .productList .cateArea .text {font-size:17px;}
 .productToggle .ptWrap {padding:60px 0;}
 #filterClose {top:20px; right:15px;}
 /* 뷰 */
 .productView .editArea iframe { width:380px !important; height:232px !important; } 

}
@media screen and (max-width:480px){
 /* 리스트 */
 /* 뷰 */
 .productView .TopTitle { margin-bottom:10px; } 
 .productView .TopTitle p { margin-bottom:15px; font-size:24px; } 
 .productView .TopTitle button { font-size:14px; } 
 .productView .thumBox img {max-width:80%;}
 }
@media screen and (max-width:400px) { /* 뷰 */
 .productView .editArea iframe { width:280px !important; height:171px !important; } 
 .productView02 .companyInfo .detailBtn { margin-top:20px; } 
 .productView02 .companyInfo .detailBtn a { font-size:16px; width:155px; } 
 .productView02 .companyInfo .detailBtn i { font-size:16px; } 
 .productPage .list .addList, .productView02 .thumBox button { width:40px; height:40px; } 
 .productPage .list .addList i, .productView02 .thumBox button i { font-size:27px; } 
 .productView .companyInfo dl dt { font-size:15px; } 
 .productView .companyInfo dl dd p, .productView .companyInfo dl dd a { font-size:15px; } 
 .productView .companyInfo dl dt { width:77px; } 
 .productView .companyInfo dl dd { width:calc(100% - 77px); } 
 .productView02 .companyInfo dl dt { width:132px; } 
 .productView02 .companyInfo dl dd { width:calc(100% - 132px); } 
 }