@font-face {font-family: 'gothambold';  src: url(/static/theme/css/Condensed/gothambold.eot);
    src: url(/static/theme/css/Condensed/gothambold.eot) format('embedded-opentype'), /* IE6-IE8 */
    url(/static/theme/css/Condensed/gothambold.woff) format('woff'), /* chrome&&firefox */
    url(/static/theme/css/Condensed/gothambold.ttf) format('truetype') /* chrome&&firefox&&Opera&&safari, Android, iOS 4.2+*/}

:root{--main_color:#3d547d; --sec_color:#d60;}
*{padding: 0; margin: 0;}
body{background-color: #f6f6f6;}
a{text-decoration: none;}
.center{width: 94%; margin: auto;}
.swiper-pagination-bullet{background-color: #fff; width: 12px; height: 12px; border-radius: 12px; transition: all 0.5s ease;}
.swiper-pagination-bullet-active{width: 30px;}

.home_tit{text-align: center; height: 70px; padding-top: 30px;}
.home_tit span{position: relative;  font-size: 24px; font-family: gothambold;}
.home_tit span:after{content: ""; position: absolute; width: 50%; height: 3px; left: 25%; top: 40px; background-color: #333;}

.nav{position: fixed; height: 60px; background-color: var(--main_color); color: #333; width: 100%; z-index: 99; padding: 2px;}
.nav .nav_logo{float: left; max-height: 30px; margin-top: 15px;}
.nav .layui-icon-left{float: left; width: 40px; color: #fff; font-size: 30px; padding-top: 16px; margin-right: 50px; cursor: pointer; display: none;}
.nav .layui-icon-search, .nav .show_purchase_order, .nav .fa-globe{float: right; color: #fff; font-size: 26px; margin: 18px 10px; cursor: pointer;}

.nav .menu_div{transition: all 0.3s; position: absolute; left: 0; top:64px; width: 100%; height: 0; overflow: auto; background-color: #eeeeee;}
.nav .menu_div .item{border-bottom: 1px solid #cccccc;}
.nav .menu_div .item span{float: left; margin-left: 24px; margin-top: 22px;}
.nav .menu_div .item a{display: block; font-size: 18px; font-weight: bold; padding: 18px 5%; margin-left: 24px;}
.nav .menu_div .item_sub{padding: 20px; border-bottom: 1px solid #cccccc; background-color: #f8f8f8; display: flex; justify-content: space-between;}
.nav .menu_div .item_sub a{display: inline-block; width: 26%; padding: 8px 2%; font-size: 14px; letter-spacing: 1px; text-align: center; border: 1px solid #dddddd; background-color: #ffffff; border-radius: 8px;}
.nav .menu_div .item_sub_product{padding: 10px; border-bottom: 1px solid #cccccc; background-color: #f8f8f8;}
.nav .menu_div .item_sub_product p{float:left; width: 27%; margin: 10px 3%; font-size: 14px; letter-spacing: 1px; cursor: pointer; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.nav .menu_div .item_sub_product p img{width: 60%; border-radius: 8px; margin-bottom: 10px;}

#menu_btn{float:right; position: relative; width: 26px; height: 26px; margin: 22px 10px 0; cursor: pointer;}
#menu_btn line1, #menu_btn line2, #menu_btn line3{transition: all 0.5s ease; transform-origin: left center;  position: absolute; width: 100%; left: 0; height: 2px; background-color: #fff;}
#menu_btn line1{top: 0;}
#menu_btn line2{top: 8px;}
#menu_btn line3{top: 16px;}

@keyframes line1_show{0%{transform: rotate(0)} 50%{transform: rotate(0)} 100%{transform: rotate(40deg);}}
@keyframes line2_show{0%{width: 100%; left: 0;} 50%{width: 0; left: 50%;} 100%{width: 0; left: 50%;}}
@keyframes line3_show{0%{transform: rotate(0)} 50%{transform: rotate(0)} 100%{transform: rotate(-40deg);}}
#menu_btn.show line1{animation:line1_show .5s; transform: rotate(40deg);}
#menu_btn.show line2{animation:line2_show .5s; width: 0; left: 50%;}
#menu_btn.show line3{animation:line3_show .5s; transform: rotate(-40deg);}

@keyframes line1_hide{0%{transform: rotate(40deg);} 50%{transform: rotate(0)} 100%{transform: rotate(0);}}
@keyframes line2_hide{0%{width: 0; left: 50%;} 50%{width: 0; left: 50%;} 100%{width: 100%; left: 0;}}
@keyframes line3_hide{0%{transform: rotate(-40deg);} 50%{transform: rotate(0)} 100%{transform: rotate(0);}}
#menu_btn.hide line1{animation:line1_hide .5s;}
#menu_btn.hide line2{animation:line2_hide .5s;}
#menu_btn.hide line3{animation:line3_hide .5s;}

.main_nav{background-color: #eeeeee; border-bottom: 1px solid #cccccc; height: 30px; line-height: 30px; padding: 8px 0; font-size: 16px; color: #666666;}
.main_nav i{color: #999999;}
.main_nav a{color: #666666; padding: 0 10px;}
.main_nav a:hover{color:#333333;}

.main_sub_cate{display: flex; justify-content: space-between; padding: 10px;}
.main_sub_cate .sub_cate{font-size: 14px; color: #666666; width: 28%; text-align: center; padding: 0 2%; border-radius: 8px; height: 30px; line-height: 30px; background-color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.main_sub_cate .sub_cate.li_on, .sub_cate:hover{background-color: var(--main_color); color: #ffffff;}

.detail_nav_box{font-size: 16px; color: #999999; padding-bottom: 15px;}
.detail_nav_box a{color: #666; padding: 0 10px;}

.foot{color: #fff; line-height: 30px; font-size: 14px; letter-spacing: 1px; background-color: #666;}

.copyright{background-color: #444; padding-top: 5px; text-shadow: none; padding-bottom: 90px;}
.copyright .center{height: 32px; letter-spacing: 1px; font-size: 12px; text-align: center;}

.foot_nav{width: 80%; padding: 0 3%; margin-left: 7%; background-color: rgba(0, 0, 0, .6); border-radius: 20px; position: fixed; bottom: 10px;}
.foot_nav a{display: inline-block; width: 17%; padding: 8px 0; margin: 0 8%; text-align: center; color: #fff; font-size: 30px;}

.layui-layer{border-radius: 12px !important;}
.layui-layer-title{border-radius: 12px 12px 0 0 !important;}

#img_smooth_check{position: absolute; left:0; right: 0; top:0; bottom: 0; background-color: rgba(0, 0, 0, .8); border-radius: 10px; padding-top:60px;}

#show_search_div{display: none; padding: 20px;}
#show_search_div .s_con{background-color: #ffffff; border: 1px solid #999999; height: 38px; padding: 5px; border-radius: 25px; margin: 20px auto; }
#show_search_div .s_con .keyword{float: left; border: 0; border-radius: 15px; width: 200px; height: 28px; padding: 5px 10px; font-size: 18px;}
#show_search_div .s_con .btn-search{float:right; border-radius: 20px; padding: 0 16px;}

#show_lang_div{display: none; padding: 20px;}
#show_lang_div a{float: left; width: 30%; margin: 30px 5% 0; padding: 4% 5%; line-height: 30px; background-color: var(--main_color); color: #fff; font-size: 18px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.purchase_div{display: none; padding: 20px;}
.purchase_submit_product{height: 360px; overflow-y: scroll;}
.purchase_send_product{height: 150px; overflow-y: scroll;}

.purchase_div .item{margin-bottom: 10px; padding-bottom: 10px; position: relative; border-bottom: 1px solid #eeeeee;}
#purchase_send_div .item{float: left; width: 50%; border-bottom: 0;}

#purchase_submit_div .item span{position: absolute; top:32px; right:2px; font-size: 28px; cursor: pointer;}

.purchase_div .item p{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 30px;}
.purchase_div .item img{width: 100px; margin-right: 10px;}
#purchase_submit_div .item img{float:left;}

#customer_name, #customer_email, #customer_remark{width: 100%; padding: 16px 0 8px; font-size: 16px; color: #666666; border: 0; border-bottom: 1px solid #cccccc;}

#purchase_submit_btn, #purchase_send_btn{width: 90%; padding: 10px; margin: 20px auto 0; background-color: #cab67b; border-radius: 20px; color: #ffffff; text-align: center; font-size: 18px; cursor: pointer;}
.not_product{text-align: center; padding-top: 100px; font-size: 24px;}