@charset "UTF-8";

.main_wrap{margin-top: 80px;}

@media screen and (max-width:1200px) {
  .main_wrap{margin-top: 115px;}
}


.main_visual{padding: 40px 0;}
.main_visual .inner{max-width: 790px;padding: 0 30px;}
.main_visual .swiper-slide .img_box{border-radius: 30px;overflow: hidden;}
.main_visual .swiper-slide .txt_box{margin-top: 36px;opacity: 0;transition: opacity 0.5s;}
.main_visual .swiper-slide-active .txt_box{opacity: 1;}
.main_visual .swiper-slide .txt_box h2{font-size: 28px;font-weight: 700;color: #111;}
.main_visual .swiper-slide .txt_box p{font-size: 20px;font-weight: 400;color: #666;margin-top: 15px;}
.main_visual .mv_ctrl{position: absolute;top: 87.5%;right: 30px;display: flex;gap: 16px;align-items: center;z-index: 33;}
.main_visual .mv_ctrl .mv_pagi{display: flex;gap: 11px;align-items: center;width: fit-content;font-size: 16px;font-weight: 400;color: #666;}
.main_visual .mv_ctrl .mv_pagi > span{font-size: 24px;color: #111;}
.main_visual .mv_ctrl .mv_pagi > span.swiper-pagination-current{font-weight: 700;}
.main_visual .mv_ctrl .mv_pagi > span.swiper-pagination-total{font-weight: 500;}
.main_visual .mv_ctrl button{display: none;min-width: 24px;background-color: transparent;border: unset;}
.main_visual .mv_ctrl button.active{display: block;}

@media screen and (max-width:768px) {
  .main_visual{padding: 20px 0;}
  .main_visual .swiper-slide .img_box{border-radius: 20px;}
  .main_visual .swiper-slide .txt_box{margin-top: 20px;}
  .main_visual .swiper-slide .txt_box h2{font-size: 20px;}
  .main_visual .swiper-slide .txt_box p{font-size: 16px;margin-top: 10px;}
  .main_visual .mv_ctrl{position: unset;gap: 12px;justify-content: right;margin-top: 16px;}
  .main_visual .mv_ctrl .mv_pagi{gap: 10px;font-size: 15px;}
  .main_visual .mv_ctrl .mv_pagi > span{font-size: 18px;}
}





.main_wrap .sct01{padding: 100px 0;}
.main_wrap .sct01 .quick_link{display: flex;justify-content: space-between;flex-wrap: wrap;}
.main_wrap .sct01 .quick_link > li{width: 14.06%;}
.main_wrap .sct01 .quick_link > li .img_box{text-align: center;}
.main_wrap .sct01 .quick_link > li .img_box img{width: 100%;max-width: 100px;transition: transform 0.3s;}
.main_wrap .sct01 .quick_link > li:hover .img_box img{transform: translateY(-10px);}
.main_wrap .sct01 .quick_link > li h3{font-size: 18px;font-weight: 500;color: #111;text-align: center;margin-top: 20px;}
.main_wrap .sct01 .main_banner{display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 100px;}
.main_wrap .sct01 .main_banner > li{width: 32.26%;border-radius: 20px;overflow: hidden;}

@media screen and (max-width:1024px) {
  .main_wrap .sct01{padding: 80px 0;}
  .main_wrap .sct01 .quick_link{gap: 16px;justify-content: center;}
  .main_wrap .sct01 .quick_link > li{width: calc(25% - 12px);}
  .main_wrap .sct01 .main_banner{gap: 20px;justify-content: center;margin-top: 80px;}
  .main_wrap .sct01 .main_banner > li{width: calc(50% - 10px);}  
}
@media screen and (max-width:520px) {
  .main_wrap .sct01 .quick_link{gap: 16px;justify-content: center;}
  .main_wrap .sct01 .quick_link > li{width: calc(50% - 8px);}
  .main_wrap .sct01 .quick_link > li .img_box img{max-width: 80px;}
  .main_wrap .sct01 .quick_link > li h3{font-size: 16px;margin-top: 12px;}
  .main_wrap .sct01 .main_banner{gap: 16px;margin-top: 60px;}
  .main_wrap .sct01 .main_banner > li{width: 100%;}  
}




.main_wrap .sct02{padding: 100px 0 160px;}
.main_wrap .sct02 .inner{display: flex;flex-wrap: wrap;}
.main_wrap .sct02 .left{width: 20%;}
.main_wrap .sct02 .right{width: 80%;}

.main_wrap .sct02 .left h2{font-size: 36px;font-weight: 700;color: #111;line-height: 1.5;}
.main_wrap .sct02 .left .category{margin-top: 56px;}
.main_wrap .sct02 .left .category > li{position: relative;font-size: 18px;font-weight: 500;color: #999;line-height: 1.6;cursor: pointer;transition: font-weight 0.3s, color 0.3s;}
.main_wrap .sct02 .left .category > li:nth-child(n + 2){margin-top: 16px;}
.main_wrap .sct02 .left .category > li.on{font-weight: 700;color: #111;}
.main_wrap .sct02 .left .category > li::after{content: '';position: absolute;top: 50%;left: 35%;width: 220px;height: 2px;background-color: #111;transform: translateY(-50%);opacity: 0;transition: opacity 0.3s;}
.main_wrap .sct02 .left .category > li.on::after{opacity: 1;}

.main_wrap .sct02 .right .best_pd{display: none;gap: 20px;flex-wrap: wrap;align-items: center;}
.main_wrap .sct02 .right .best_pd.active{display: flex;}
.main_wrap .sct02 .right .best_pd .thumb{display: flex;align-items: end;width: calc(54.68% - 10px);height: 380px;background-repeat: no-repeat;background-position: center;background-size: cover;border-radius: 20px;padding: 36px;}
.main_wrap .sct02 .right .best_pd.tape .thumb{background-image: url(/html/img/main_best_bg01.jpg);}
.main_wrap .sct02 .right .best_pd.tool .thumb{background-image: url(/html/img/main_best_bg01.jpg);}
.main_wrap .sct02 .right .best_pd.office .thumb{background-image: url(/html/img/main_best_bg01.jpg);}
.main_wrap .sct02 .right .best_pd.etc .thumb{background-image: url(/html/img/main_best_bg01.jpg);}

.main_wrap .sct02 .right .best_pd .thumb .txt_box h3{font-size: 24px;font-weight: 700;color: #fff;line-height: 1.6;}
.main_wrap .sct02 .right .best_pd .thumb .txt_box p{font-size: 16px;font-weight: 400;color: #fff;line-height: 1.6;margin-top: 4px;}
.main_wrap .sct02 .right .best_pd .pd_list{width: calc(45.32% - 10px);}
.main_wrap .sct02 .right .best_pd .pd_list > li:nth-child(n + 2){border-top: #DDDDDD solid 1px;}
.main_wrap .sct02 .right .best_pd .pd_list > li a{display: flex;justify-content: space-between;align-items: center;}
.main_wrap .sct02 .right .best_pd .pd_list > li a .img_box{width: 28%;}
.main_wrap .sct02 .right .best_pd .pd_list > li a .txt_box{width: 66.66%;}
.main_wrap .sct02 .right .best_pd .pd_list > li a .txt_box h4{font-size: 18px;font-weight: 700;color: #111;line-height: 1.6;}
.main_wrap .sct02 .right .best_pd .pd_list > li a .txt_box p{font-size: 14px;font-weight: 500;color: #777;line-height: 1.5;margin-top: 6px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}

@media screen and (max-width:1024px) {
  .main_wrap .sct02{padding: 80px 0 100px;}
  .main_wrap .sct02 .inner{gap: 20px;}
  .main_wrap .sct02 .left{width: 100%;}
  .main_wrap .sct02 .right{width: 100%;}

  .main_wrap .sct02 .left h2{font-size: 32px;}
  .main_wrap .sct02 .left .category{display: flex;gap: 20px;flex-wrap: wrap;margin-top: 40px;}
  .main_wrap .sct02 .left .category > li:nth-child(n + 2){margin-top: 0;}
  .main_wrap .sct02 .left .category > li::after{display: none;}
}
@media screen and (max-width:768px) {
  .main_wrap .sct02 .left .category{gap: 16px;margin-top: 20px;}

  .main_wrap .sct02 .right .best_pd .thumb{width: 100%;height: 240px;padding: 24px;}

  .main_wrap .sct02 .right .best_pd .thumb .txt_box h3{font-size: 20px;}
  .main_wrap .sct02 .right .best_pd .thumb .txt_box p{font-size: 15px;}
  .main_wrap .sct02 .right .best_pd .pd_list{width: 100%;}
  .main_wrap .sct02 .right .best_pd .pd_list > li{padding: 10px 0;}
  .main_wrap .sct02 .right .best_pd .pd_list > li a .img_box{width: 26%;}
  .main_wrap .sct02 .right .best_pd .pd_list > li a .txt_box{width: 68.66%;}
  .main_wrap .sct02 .right .best_pd .pd_list > li a .txt_box p{margin-top: 2px;}
}





.main_wrap .sct03{padding: 100px 0 120px;background-color: #F6F7F9;}
.main_wrap .sct03 .tit_box h2{font-size: 36px;font-weight: 700;color: #111;line-height: 1.5;text-align: center;}
.main_wrap .sct03 .tit_box p{font-size: 20px;font-weight: 500;color: #666;text-align: center;margin-top: 8px;}
.main_wrap .sct03 .pd_tab{display: flex;gap: 36px;justify-content: center;flex-wrap: wrap;margin-top: 36px;}
.main_wrap .sct03 .pd_tab > li{font-size: 24px;font-weight: 700;color: #777;line-height: 1.6;padding: 6px 0;cursor: pointer;border-bottom: transparent solid 2px;transition: color 0.3s;}
.main_wrap .sct03 .pd_tab > li:hover{color: #111;}
.main_wrap .sct03 .pd_tab > li.on{color: #111;border-bottom: #000 solid 2px;}
.main_wrap .sct03 .md_list{display: none;gap: 20px;flex-wrap: wrap;margin-top: 56px;}
.main_wrap .sct03 .md_list.active{display: flex;}
.main_wrap .sct03 .md_list > li{width: calc(25% - 15px);}
.main_wrap .sct03 .md_list > li > a{display: block;width: 100%;height: 100%;background-color: #fff;border: #DDDDDD solid 1px;border-radius: 10px;padding: 24px 32px;}
.main_wrap .sct03 .md_list > li > a .img_box{position: relative;text-align: center;}
.main_wrap .sct03 .md_list > li > a .img_box .md_cart{position: absolute;bottom: 12px;right: 12px;background-color: transparent;border: unset;transition: filter 0.3s;}
.main_wrap .sct03 .md_list > li > a .img_box .md_cart:hover{filter: invert(1);}
.main_wrap .sct03 .md_list > li > a .txt_box{margin-top: 24px;}
.main_wrap .sct03 .md_list > li > a .txt_box .company{display: block;font-size: 14px;font-weight: 400;color: #666;}
.main_wrap .sct03 .md_list > li > a .txt_box h3{font-size: 20px;font-weight: 500;color: #111;margin-top: 6px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main_wrap .sct03 .md_list > li > a:hover .txt_box h3{text-decoration: underline;}
.main_wrap .sct03 .md_list > li > a .txt_box .price{display: block;font-size: 28px;font-weight: 700;color: #111;margin-top: 10px;}
.main_wrap .sct03 .md_list > li > a .txt_box .price .sale{color: #0084FF;}
.main_wrap .sct03 .md_pd_link{display: flex;gap: 4px;align-items: center;justify-content: center;width: 90%;max-width: 300px;font-size: 20px;font-weight: 600;color: #111;text-align: center;margin: 90px auto 0;padding: 20px;border: #111 solid 1px;border-radius: 999px;transition: background-color 0.3s, color 0.3s;}
.main_wrap .sct03 .md_pd_link img{transition: filter 0.3s;}
.main_wrap .sct03 .md_pd_link:hover{background-color: #111;color: #fff;}
.main_wrap .sct03 .md_pd_link:hover img{filter: invert(1);}

@media screen and (max-width:1024px) {
  .main_wrap .sct03{padding: 80px 0 100px;}
  .main_wrap .sct03 .tit_box h2{font-size: 32px;}
  .main_wrap .sct03 .tit_box p{font-size: 16px;margin-top: 4px;}
  .main_wrap .sct03 .pd_tab{gap: 20px;margin-top: 30px;}
  .main_wrap .sct03 .pd_tab > li{font-size: 20px;}
  .main_wrap .sct03 .md_list{gap: 12px;margin-top: 40px;}
  .main_wrap .sct03 .md_list > li{width: calc(25% - 9px);}
  .main_wrap .sct03 .md_list > li > a{padding: 20px 30px;}
  .main_wrap .sct03 .md_list > li > a .img_box .md_cart{bottom: 0;right: 0;}
  .main_wrap .sct03 .md_list > li > a .txt_box{margin-top: 20px;}
  .main_wrap .sct03 .md_list > li > a .txt_box h3{font-size: 18px;}
  .main_wrap .sct03 .md_list > li > a .txt_box .price{font-size: 22px;margin-top: 8px;}
  .main_wrap .sct03 .md_pd_link{font-size: 18px;margin: 60px auto 0;padding: 16px;}
}
@media screen and (max-width:768px) {
  .main_wrap .sct03 .tit_box h2{font-size: 28px;}
  .main_wrap .sct03 .pd_tab{gap: 10px 16px;margin-top: 30px;}
  .main_wrap .sct03 .pd_tab > li{font-size: 18px;padding: 4px 0;}
  .main_wrap .sct03 .md_list{gap: 20px 10px;}
  .main_wrap .sct03 .md_list > li{width: calc(50% - 5px);}
  .main_wrap .sct03 .md_list > li > a{padding: 20px 16px;}
  .main_wrap .sct03 .md_list > li > a .img_box .md_cart{width: 46px;}
  .main_wrap .sct03 .md_list > li > a .txt_box{margin-top: 16px;}
  .main_wrap .sct03 .md_list > li > a .txt_box h3{font-size: 16px;}
  .main_wrap .sct03 .md_list > li > a .txt_box .price{font-size: 18px;margin-top: 4px;}
  .main_wrap .sct03 .md_pd_link{padding: 10px;}
}
@media screen and (max-width:320px) {
  .main_wrap .sct03 .md_list > li{width: 100%;}
}





.main_pd_sct .top_box{display: flex;justify-content: space-between;align-items: start;flex-wrap: wrap;}
.main_pd_sct .top_box .tit h2{font-size: 32px;font-weight: 700;color: #111;line-height: 1.5;}
.main_pd_sct .top_box .tit h2 br{display: none;}
.main_pd_sct .top_box .tit p{font-size: 20px;font-weight: 500;color: #666;line-height: 1.6;margin-top: 4px;}
.main_pd_sct .top_box a{display: flex;gap: 4px;align-items: center;font-size: 18px;font-weight: 600;color: #111;}
.main_pd_sct .top_box a:hover{text-decoration: underline;}

/* .main_pd_sct .category_pd_list{display: flex;gap: 20px;flex-wrap: wrap;margin-top: 56px;}
.main_pd_sct .category_pd_list > li{width: calc(25% - 15px);}
.main_pd_sct .category_pd_list > li > a{display: block;width: 100%;height: 100%;background-color: #fff;border: #DDDDDD solid 1px;border-radius: 10px;padding: 24px 32px;}
.main_pd_sct .category_pd_list > li > a .img_box{position: relative;text-align: center;}
.main_pd_sct .category_pd_list > li > a .img_box .md_cart{position: absolute;bottom: 12px;right: 12px;background-color: transparent;border: unset;transition: filter 0.3s;}
.main_pd_sct .category_pd_list > li > a .img_box .md_cart:hover{filter: invert(1);}
.main_pd_sct .category_pd_list > li > a .txt_box{margin-top: 24px;}
.main_pd_sct .category_pd_list > li > a .txt_box .company{display: block;font-size: 14px;font-weight: 400;color: #666;}
.main_pd_sct .category_pd_list > li > a .txt_box h3{font-size: 20px;font-weight: 500;color: #111;margin-top: 6px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.main_pd_sct .category_pd_list > li > a:hover .txt_box h3{text-decoration: underline;}
.main_pd_sct .category_pd_list > li > a .txt_box .price{display: block;font-size: 28px;font-weight: 700;color: #111;margin-top: 10px;}
.main_pd_sct .category_pd_list > li > a .txt_box .price .sale{color: #0084FF;} */

@media screen and (max-width:1024px) {
  .main_pd_sct .top_box .tit h2{font-size: 26px;}
  .main_pd_sct .top_box .tit p{font-size: 18px;}
  .main_pd_sct .top_box a{font-size: 17px;}

  /* .main_pd_sct .category_pd_list{gap: 12px;margin-top: 40px;}
  .main_pd_sct .category_pd_list > li{width: calc(25% - 9px);}
  .main_pd_sct .category_pd_list > li > a{padding: 20px 30px;}
  .main_pd_sct .category_pd_list > li > a .img_box .md_cart{bottom: 0;right: 0;}
  .main_pd_sct .category_pd_list > li > a .txt_box{margin-top: 20px;}
  .main_pd_sct .category_pd_list > li > a .txt_box h3{font-size: 18px;}
  .main_pd_sct .category_pd_list > li > a .txt_box .price{font-size: 22px;margin-top: 8px;} */
}
@media screen and (max-width:768px) {
  .main_pd_sct .top_box{gap: 16px;}
  .main_pd_sct .top_box .tit{width: 100%;}
  .main_pd_sct .top_box .tit h2{font-size: 24px;}
  .main_pd_sct .top_box .tit h2 br{display: block;}
  .main_pd_sct .top_box .tit p{font-size: 16px;}
  .main_pd_sct .top_box a{font-size: 16px;margin-left: auto;}

  /* .main_pd_sct .category_pd_list{gap: 20px 10px;}
  .main_pd_sct .category_pd_list > li{width: calc(50% - 5px);}
  .main_pd_sct .category_pd_list > li > a{padding: 20px 16px;}
  .main_pd_sct .category_pd_list > li > a .img_box .md_cart{width: 46px;}
  .main_pd_sct .category_pd_list > li > a .txt_box{margin-top: 16px;}
  .main_pd_sct .category_pd_list > li > a .txt_box h3{font-size: 16px;}
  .main_pd_sct .category_pd_list > li > a .txt_box .price{font-size: 18px;margin-top: 4px;} */
}
@media screen and (max-width:320px) {
  /* .main_pd_sct .category_pd_list > li{width: 100%;} */
}





.main_wrap .sct04{padding-top: 100px;}
.main_wrap .sct05{padding-top: 100px;}
.main_wrap .sct06{padding: 100px 0;}

@media screen and (max-width:1024px) {
  .main_wrap .sct04{padding-top: 80px;}
  .main_wrap .sct05{padding-top: 80px;}
  .main_wrap .sct06{padding: 80px 0;}
}





.main_wrap .sct07{padding: 100px 0;background-color: #FAFAFA;}
.main_wrap .sct07 .tit h2{font-size: 32px;font-weight: 700;color: #111;line-height: 1.5;}
.main_wrap .sct07 .tit p{font-size: 20px;font-weight: 500;color: #666;line-height: 1.6;margin-top: 4px;}
.main_wrap .sct07 .contact_link{display: flex;gap: 24px;flex-wrap: wrap;margin-top: 36px;}
.main_wrap .sct07 .contact_link > li{width: calc(50% - 12px);}
.main_wrap .sct07 .contact_link > li a{display: flex;gap: 10px;justify-content: space-between;align-items: center;flex-wrap: wrap;width: 100%;height: 100%;background-color: #F0F1F3;border-radius: 20px;padding: 50px;}
.main_wrap .sct07 .contact_link > li a .txt_box{width: calc(100% - 82px);}
.main_wrap .sct07 .contact_link > li a .txt_box h3{display: flex;gap: 4px;align-items: center;font-size: 28px;font-weight: 700;color: #444;}
.main_wrap .sct07 .contact_link > li a:hover .txt_box h3{text-decoration: underline;}
.main_wrap .sct07 .contact_link > li a .txt_box h3 img{transition: transform 0.3s;}
.main_wrap .sct07 .contact_link > li a:hover .txt_box h3 img{transform: translateX(5px);}
.main_wrap .sct07 .contact_link > li a .txt_box p{font-size: 18px;font-weight: 400;color: #666;margin-top: 10px;}

@media screen and (max-width:1024px) {
  .main_wrap .sct07{padding: 80px 0;}
  .main_wrap .sct07 .tit h2{font-size: 26px;}
  .main_wrap .sct07 .tit p{font-size: 18px;}
  .main_wrap .sct07 .contact_link{gap: 16px;margin-top: 30px;}
  .main_wrap .sct07 .contact_link > li{width: calc(50% - 8px);}
  .main_wrap .sct07 .contact_link > li a{padding: 40px;}
  .main_wrap .sct07 .contact_link > li a .txt_box{width: calc(100% - 70px);}
  .main_wrap .sct07 .contact_link > li a .txt_box h3{font-size: 22px;}
  .main_wrap .sct07 .contact_link > li a .txt_box p{font-size: 16px;margin-top: 8px;}
  .main_wrap .sct07 .contact_link > li a .img_box{width: 60px;}
}
@media screen and (max-width:768px) {
  .main_wrap .sct07 .tit h2{font-size: 24px;}
  .main_wrap .sct07 .tit p{font-size: 16px;}
  .main_wrap .sct07 .contact_link{gap: 10px;}
  .main_wrap .sct07 .contact_link > li{width: 100%;}
  .main_wrap .sct07 .contact_link > li a{padding: 30px;}
  .main_wrap .sct07 .contact_link > li a .txt_box{width: calc(100% - 50px);}
  .main_wrap .sct07 .contact_link > li a .txt_box h3{font-size: 20px;}
  .main_wrap .sct07 .contact_link > li a .txt_box h3 img{width: 24px;}
  .main_wrap .sct07 .contact_link > li a .img_box{width: 40px;}
}
@media screen and (max-width:320px) {
  .main_wrap .sct07 .contact_link > li a .txt_box{width: 100%;}
  .main_wrap .sct07 .contact_link > li a .img_box{width: 100%;text-align: right;}
  .main_wrap .sct07 .contact_link > li a .img_box img{width: 40px;}
}