/* base =======================================================================*/
.main { margin-top: 100px; margin-bottom: 10%; }
.main .wrap { max-width: 1330px; margin: 0 auto; }

[class^="wrap-"] { margin: 0 auto; }

/* Banner =====================================================================*/
.banner { background: #3F3F3F; overflow: hidden; position: relative; display: flex; justify-content: center; min-height: 125px; }
.banner picture { width: 100%; }
.banner picture + h1, .flexslider + h1 { padding: 0px; position: absolute; bottom: 10%; z-index: 9; }
.banner img { width: 100%; float: left; }
.banner h1 { padding-top: 125px; padding-bottom: 10px; max-width: 700px; width: 100%; text-align: center; color: #fff; font-size: 52px; margin: 0px; line-height: 52px; }
@media all and (max-width: 992px) { .banner h1 { font-size: 32px; line-height: 32px; } }

/* About ======================================================================*/
.wrap-about { max-width: 850px; }

/* Products ===================================================================*/
.wrap-products, .wrap-productsList { max-width: 1330px; display: flex; flex-wrap: wrap; }
.wrap-products .product-main { width: 100%; display: flex; justify-content: center; padding-bottom: 20px; }
/* .wrap-products .product-main a { max-width: 740px; width: 100%; }
.wrap-products .product-main a .pic { max-width: 500px; }
.wrap-products .product-main a .pic img { max-height: 364px; } */
.wrap-products .list { width: calc(100%/3 - 17px); margin-right: 25px; margin-bottom: 80px; display: block; text-align: center; display: flex; flex-direction: column; justify-content: space-between; }
.wrap-products .list:nth-child(3n+3) { margin-right: 0px; }
.wrap-products .list a:hover .pic img { transform: scale(1.1); }
.wrap-products .list a:hover .name { color: #969696; }
.wrap-products .list .pic { max-width: 350px; margin: 0 auto; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.wrap-products .list .pic img { width: auto; max-height: 255px; float: left; transition: all .2s; }
.wrap-products .name { display: block; font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 30px; font-weight: bold; margin: 0; margin-top: 20px; text-align: center; color: #4D4D4D; transition: all .2s; }
.wrap-products .list .external_link { display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 5px; background: #44A736; color: #fff; margin: 10px auto 0 auto; font-size: 20px; }
.wrap-products .list .external_link:before { content: '\f270'; font-family: FontAwesome-Brands; display: inline-block; }
.wrap-products .list .external_link:hover { opacity: .5; }
@media all and (max-width: 1024px) { .wrap-products .list .external_link { width: 45px; height: 45px; font-size: 25px; } }
@media all and (max-width: 992px) { .wrap-products { justify-content: space-between; }
  .wrap-products .list { width: calc(50% - 54px); margin-right: 0px; }
  .wrap-products .name { font-size: 16px; } }
@media all and (max-width: 480px) { .wrap-products .list { width: calc(50% - 17px); } }
@media all and (max-width: 480px) { .wrap-products .list { width: 100%; } }

/* Products Detail ============================================================*/
.wrap-prodetail { overflow: hidden; }
.wrap-prodetail .left { max-width: 630px; width: 100%; float: left; }
.wrap-prodetail .left .showbox { width: 100%; min-height: 540px; display: flex; justify-content: center; align-items: center; border: 1px solid #ACACAC; }
.wrap-prodetail .left .showbox img { max-height: 500px; }
.wrap-prodetail .right { width: calc(100% - 680px); padding-left: 50px; float: right; }
.wrap-prodetail .right .name { font-size: 52px; line-height: 52px; margin-top: 0px; color: #4c4c4c; }
.wrap-prodetail .owlpro { padding: 20px 0; }
.wrap-prodetail .owlpro .item { cursor: pointer; border: 1px solid #acacac; }
.wrap-prodetail .owlpro .owl-nav { position: absolute; top: calc(50% - 12px); width: 100%; margin-top: 0px; }
.wrap-prodetail .owlpro .owl-nav [class*=owl-] { margin: 0px; padding: 0px; background: transparent; font-size: 25px; color: #3F3F3F; position: absolute; }
.wrap-prodetail .owlpro .owl-nav [class*=owl-]:before { content: ''; font-family: FontAwesome-Solid; opacity: .5; }
.wrap-prodetail .owlpro .owl-nav [class*=owl-]:hover { background: transparent; }
.wrap-prodetail .owlpro .owl-nav [class*=owl-]:hover:before { color: #4c4c4c; opacity: 1; }
.wrap-prodetail .owlpro .owl-nav [class*=owl-].disabled { opacity: 0; }
.wrap-prodetail .owlpro .owl-nav .owl-prev { left: 0px; }
.wrap-prodetail .owlpro .owl-nav .owl-prev:before { content: '\f053'; }
.wrap-prodetail .owlpro .owl-nav .owl-next { right: 0px; }
.wrap-prodetail .owlpro .owl-nav .owl-next:before { content: '\f054'; }
.wrap-prodetail .resp-tab-content { padding: 0px; border: none; border-top: 2px solid #B1B1B1; overflow: hidden; }
.wrap-prodetail .resp-tab-content p { margin: 1.12em 0; }
@media all and (max-width: 1366px) { .wrap-prodetail { padding: 0 5%; } }
@media all and (max-width: 1110px) { .wrap-prodetail { padding: 0px; }
  .wrap-prodetail .left { margin: 0 auto; max-width: 1000px; }
  .wrap-prodetail .left .showbox { min-height: auto; }
  .wrap-prodetail .right { width: 100%; margin-top: 30px; padding-left: 0px; }
  .wrap-prodetail .right .name { font-size: 32px; line-height: 32px; } }

/* News =======================================================================*/
.wrap-news { display: flex; justify-content: space-between; }
.wrap-news .news-content { flex-basis: 900px; border-top: 5px solid #999; border-bottom: 5px solid #999; overflow-y: auto; padding: 20px 0; max-height: 1720px; }
.wrap-news .news-content::-webkit-scrollbar { width: 7px; background: #ddd; }
.wrap-news .news-content::-webkit-scrollbar-track { background: #ddd; }
.wrap-news .news-content::-webkit-scrollbar-thumb { background: #bababa; }
.wrap-news .news-content .list { margin-bottom: 20px; position: relative; color: #4a4a4a; transition: all .3s; }
.wrap-news .news-content .list:last-child { margin-bottom: 0px; }
.wrap-news .news-content .list:hover { opacity: .5; }
.wrap-news .news-content .list .content { display: flex; justify-content: space-between; align-items: center; }
.wrap-news .news-content .list .pic { flex-basis: 340px; }
.wrap-news .news-content .list .pic figure { border: 1px solid #acacac; display: flex; justify-content: center; align-items: center; max-width: 340px; max-height: 195px; overflow: hidden; }
.wrap-news .news-content .list .pic figure img { width: auto; min-height: 195px; float: left; }
.wrap-news .news-content .list .pic .name { margin: 0px; background: #4c4c4c; color: #fff; text-align: center; font-size: 24px; font-weight: normal; padding: 6px 5%; }
.wrap-news .news-content .list .textBox { flex-basis: 500px; }
.wrap-news .news-content .list .textBox .title { margin: 0px; font-size: 24px; font-weight: normal; line-height: 30px; }
.wrap-news .news-content .list .textBox .time { font-size: 24px; padding: 20px 0; }
.wrap-news .news-content .list .textBox .textBox { font-size: 18px; }
.wrap-news .news-content .list .link { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.wrap-news .news-sidebar { flex-basis: 380px; font-size: 24px; line-height: 26px; }
.wrap-news .news-sidebar .btn-news { padding: 10px 20px; color: #fff; background: #4C4C4C; pointer-events: none; position: relative; }
@media all and (max-width: 1110px) { .wrap-news { flex-direction: column; }
  .wrap-news .news-content { flex-basis: auto; order: 2; }
  .wrap-news .news-content .list .content { flex-direction: column; }
  .wrap-news .news-content .list .pic { flex-basis: auto; margin-bottom: 20px; }
  .wrap-news .news-content .list .textBox { flex-basis: auto; max-width: 340px; }
  .wrap-news .news-sidebar { flex-basis: auto; order: 1; margin-bottom: 20px; }
  .wrap-news .news-sidebar .btn-news { pointer-events: auto; padding-right: 50px; }
  .wrap-news .news-sidebar .btn-news:after { content: '\f0c9'; font-family: FontAwesome-Solid; position: absolute; right: 10px; }
  .wrap-news .news-sidebar .btn-news.open:after { content: '\f00d'; } }

.news-option { margin-bottom: 60px; }
@media all and (max-width: 1110px) { .news-option { margin-bottom: 30px; } }

.news-menu { padding-top: 20px; }
.news-menu li { transition: all .3s; }
.news-menu li:hover { opacity: .5; }
.news-menu a { font-size: 22px; color: #484848; padding: 12px 20px; padding-right: 50px; display: block; border-bottom: 1px solid #adadad; position: relative; }
.news-menu a:after { content: '\f107'; font-family: FontAwesome-Solid; position: absolute; right: 15px; top: calc(50% - 13px); }
@media all and (max-width: 1110px) { .news-menu { display: none; padding-top: 0px; } }

.news-care .content { margin-top: 20px; font-size: 18px; }
.news-care .content .mail { display: block; padding-top: 20px; color: #282828; }
.news-care .content .mail:hover { opacity: .5; }
@media all and (max-width: 1110px) { .news-care .content { margin-top: 0px; padding-top: 20px; display: none; } }

/* Distributor ====================================================================*/
.wrap-distributor { font-size: 22px; line-height: 32px; text-align: center; }
.wrap-distributor p { margin: 0px; margin-bottom: 30px; }

.distributor-form { padding-top: 35px; font-size: 15px; max-width: 800px; width: 100%; margin: 0px auto; }
.distributor-form .row { display: flex; justify-content: space-between; padding-bottom: 30px; }
.distributor-form input { color: #B3B3B3; background: #fff; border: 1px solid #909090; border-radius: 5px; font-size: 16px; padding: 10px; }
.distributor-form input.inpt-name { width: calc(60% - 60px); }
.distributor-form input.inpt-phone { width: 40%; }
.distributor-form input.inpt-business { width: 40%; }
.distributor-form input.inpt-website { width: calc(60% - 60px); }
.distributor-form input.inpt-mail { width: 60%; }
.distributor-form .title { margin: 0px; text-align: left; display: block; font-size: 24px; font-weight: bold; padding: 20px 0; }
.distributor-form .check-information { text-align: left; font-size: 16px; padding-bottom: 50px; }
.distributor-form .check-information label { cursor: pointer; color: #B2B2B2; }
.distributor-form .check-information label:before { display: inline-block; content: ''; width: 10px; height: 10px; border: 1px solid #4c4c4c; margin-right: 8px; }
.distributor-form .check-information [type="checkbox"] { display: none; }
.distributor-form .check-information [type="checkbox"]:checked ~ label { color: #4C4C4C; }
.distributor-form .check-information [type="checkbox"]:checked ~ label:before { background: #4c4c4c; }

/* Contact ====================================================================*/
.contact-date li { padding-bottom: 60px; }

.wrap-contact { text-align: center; color: #4c4c4c; font-size: 22px; line-height: 32px; }
.wrap-contact .name { margin: 0px; padding-bottom: 15px; }

.googlemap { position: relative; padding-top: 30%; }
.googlemap iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

/* Search =====================================================================*/
.search-form [class^="sf-"] { font-size: 15px; text-align: center; color: #282828; }
.search-form .sf-number { width: 40px; }
.search-form .sf-category { width: 250px; }
.search-form .sf-pic { width: 300px; }
.search-form .sf-name { width: 364px; }
.search-form .headline { display: flex; }
.search-form .headline div { color: #fff; background: #4D4D4D; line-height: 36px; position: relative; }
.search-form .headline div:before { content: ''; position: absolute; top: 20%; right: -1px; z-index: 1; width: 1px; height: 60%; background: #fff; }
.search-form .headline div.sf-number { background: #0FB494; }
.search-form .headline div.sf-number:before { display: none; }
.search-form .headline div:last-child:before { display: none; }
.search-form .row { display: flex; padding: 20px 0px; border-bottom: 1px solid #D7D7D7; }
.search-form .row:hover { opacity: .7; border-color: #0FB494; }
.search-form .row:hover [class^="sf-"] { color: #0FB494; }
.search-form .row span { display: flex; justify-content: center; align-items: center; }
.search-form .row .sf-pic img { width: auto; max-width: 130px; }

@media only screen and (max-width: 480px) { .search-form .sf-pic { width: 130px; }
  .search-form .headline { display: none; }
  .search-form .row .sf-number { display: none; }
  .search-form .row .sf-category { display: none; } }
@media only screen and (max-width: 375px) { .search-form .sf-pic { width: 100%; }
  .search-form .sf-name { width: 100%; }
  .search-form .row { flex-direction: column; justify-content: center; align-items: center; }
  .search-form .row .sf-pic img { max-width: 280px; } }
/* Inquiry ====================================================================*/
.inquiry-form [class^="inq-"] { font-size: 15px; text-align: center; }
.inquiry-form .inq-number { width: 40px; }
.inquiry-form .inq-pic { width: 180px; }
.inquiry-form .inq-name { width: 374px; }
.inquiry-form .inq-quantity { width: 140px; }
.inquiry-form .inq-del { width: 140px; }
.inquiry-form img { width: auto; max-height: 70px; }
.inquiry-form .headline { display: flex; }
.inquiry-form .headline div { color: #fff; background: #4D4D4D; line-height: 36px; position: relative; }
.inquiry-form .headline div:before { content: ''; position: absolute; top: 20%; right: -1px; z-index: 1; width: 1px; height: 60%; background: #fff; }
.inquiry-form .headline div.inq-number { background: #0FB494; }
.inquiry-form .headline div.inq-number:before { display: none; }
.inquiry-form .headline div:last-child:before { display: none; }
.inquiry-form .row { display: flex; padding: 5px 0px; border-bottom: 1px solid #D7D7D7; }
.inquiry-form .row div { display: flex; justify-content: center; align-items: center; }
.inquiry-form .row div .inq-quantity input[type="text"] { width: 40px; padding: 3px 5px; background: #fff; border: 1px solid #E6E6E6; }
.inquiry-form .row div .inq-del input[type="checkbox"] { width: 15px; height: 15px; }
.inquiry-form .formBtn { display: flex; justify-content: flex-end; padding: 25px 0; border-bottom: 4px solid #77CCB7; }
.inquiry-form .formBtn [class^="btn-"] { margin-left: 8px; }
.inquiry-form .formBtn [class^="btn-"]:first-child { margin-left: 0px; }

@media only screen and (max-width: 992px) { .inquiry-form [class^="inq-"] { text-align: left; }
  .inquiry-form .inq-pic { width: 100px; }
  .inquiry-form .inq-quantity { padding: 5px 0; }
  .inquiry-form .inq-del { width: 40px; }
  .inquiry-form .headline { display: none; }
  .inquiry-form .row .inq-number { display: none; }
  .inquiry-form .row .inqbox-product { width: calc(100% - 140px); flex-direction: column; }
  .inquiry-form .row .inqbox-product div { width: 100%; justify-content: flex-start; } }
@media only screen and (max-width: 425px) { .inquiry-form .formBtn { justify-content: center; } }
/* Sitemap ====================================================================*/
.sitemap .row { margin-bottom: 30px; }
.sitemap [class^="layout-"] { background: #F1F1F1; }
.sitemap [class^="layout-"] a { display: flex; align-items: center; padding: 6px 10px; color: #252525; }
.sitemap [class^="layout-"] a:before { content: ''; margin-right: 8px; font-family: FontAwesome-Solid; }
.sitemap .layout-head { background: #0FB494; }
.sitemap .layout-head a { color: #fff; }
.sitemap .layout-head a:before { display: none; }
.sitemap .layout-1 { background: #D7E7E4; }
.sitemap .layout-1 a { font-size: 15px; color: #252525; }
.sitemap .layout-1 a:before { content: '\f0da'; color: #0EB391; background: transparent; border-radius: 0px; display: flex; justify-content: center; align-items: center; font-size: 12px; }
.sitemap .layout-2 { padding: 10px 10px 0 10px; }
.sitemap .layout-2 a { color: #029777; font-size: 15px; }
.sitemap .layout-2 a:before { content: ''; width: 4px; height: 4px; background: #BABABA; border-radius: 100%; }
.sitemap .layout-end { display: flex; flex-direction: row; flex-wrap: wrap; padding: 0 10px 10px 10px; }
.sitemap .layout-end a { font-size: 14px; color: #252525; width: calc(100%/4 - 25px); padding: 10px 15px 10px 10px; }
.sitemap .layout-end a:before { content: ''; width: 2px; height: 2px; background: #BABABA; border-radius: 100%; }

@media only screen and (max-width: 992px) { .sitemap .layout-end a { width: calc(50% - 25px); } }
@media only screen and (max-width: 375px) { .sitemap .layout-end a { width: 100%; } }