@charset "utf-8";
/* .mauto{ width:auto; padding:0 30px}
.card-body{ min-width:auto}
.header-main{ min-width:auto}
.footer{ min-width:auto; width:auto}
.foot_menu{ width:auto}
.menu ul{ width:auto} */

/* .header-main{ background:#fff; border-bottom:1px solid #e8e8e8; height:200px}
.topbar{ background:#fff}
.topbar i.bg{background: #fff;}
.topbar .nav ul li{ border-right:1px solid #eee}
.topbar .nav ul li a{ color:#333}
.topbar .nav ul li a:hover{ color:#2190ff}
.welcome{ color:#999;}
.login a{ color:#2190ff;}
.login a.reg{ background:#2190ff; color:#fff} */
.topbar i.bg{ height:85px; display:none}
.header-fixed .headinfo{position: absolute;top: 46px;}
.header-fixed .right_nav{position: absolute;top: 60px;}
/* .headinfo{ width:auto; margin:0; left:30px; right:30px; top:46px} */
/* .logo h1 a{ background:url(../images/logo.png) no-repeat center} */

.focusBox { margin-bottom:30px; height:360px;}
.focusBox .pic{ background:none}
.focusBox .pic a { height:360px; border-radius:10px}
.focusBox .hd { bottom: 10px; text-align: center}
/*色卡搜索*/
.sekasearch{ float:left; width:100%; padding:20px 0; text-align: center; background:#f8fbff; box-shadow:0 0 2px rgb(33 144 255 / 30%); border-radius:6px}
.searchbox{ position:relative; overflow:hidden; float: left; margin-left:20px}
.searchbox .hd ul li{ float:left; width:100px; height:20px; padding:5px 0; margin-left:8px; font-size:12px; background:#fff; color:#096fd5; border:1px solid #ececec; border-bottom:0; border-radius:4px 4px 0 0; transition: all .3s;cursor:pointer}
.searchbox .hd ul li i{ margin-right:5px}
.searchbox .hd ul li.on{ position:relative; background:#2190ff; color:#fff; border-color:#2190ff}
.searchbox .bd{ float:left; width:470px;}
.searchbox .bd ul li{ float:left; display:block; background:#fff; border:3px solid #2190ff; border-radius:6px;}
.searchbox .bd ul li input{ float:left; width:464px; height:40px; text-indent:20px; background:#fff; border-radius:4px 0 0 4px;}

.searchbox .clearbtn{ position:absolute; right:3px; bottom:3px}
.searchbox .clearbtn button{width:30px;height:40px;background:#fff;color:#bbb;}
/*成分比例*/
.ingrfloat{ margin-top:30px; background:#fff6db; padding:0 20px; border:1px solid #f1e2b6; border-radius:6px; overflow:hidden}
.ingrfloat div{ float:left; line-height:40px}
.ingrfloat .form span{ float:left; margin:10px}
.ingrfloat .form input{ float:left; width:50px; text-align:center; margin:10px; border:1px solid #e2e2e2; height:40px; line-height:40px}
.ingrfloat .form em{ float:left; margin:10px;}
.ingrfloat .form .btn{ height:40px; line-height:40px; font-size:16px; background:#4CAF50; border-color:#4CAF50; box-shadow:none}
.ingrfloat .tip{ height:40px; margin:10px; color:#b19e67}
/*色卡*/
.seka{ float:left; width: 1490px; margin:0 0 0 -11px; overflow:hidden; padding:0}
.seka .item{float:left;width:276px;padding:0;margin:11px}
.seka .item span{ position:relative; padding:0; display:block}
.seka .item .info{height:130px}
/*花型库*/
.huaxing{ width:auto; margin-bottom:30px; background:#edf3f9; overflow:hidden; padding:30px 4px 10px; border-radius:6px}
.huaxing .item{ width:158px; padding:0; margin:0 0 20px 22px;}
/*面包屑*/
.position_bar{ padding:0 30px; color:#caddef}
.position_bar a{ color:#caddef}
.position_bar a:hover{ color:#2190ff}
.position_bar i{ font-family:"宋体"; padding:0 5px; color:#caddef}
/*色卡详情*/
.sekaDetail .headinfo{ width:auto; margin:0; left:30px; right:30px;}
.sekaDetail .header-fixed .headinfo{position: fixed;top: 8px;}
.sekaDetail .mauto{ width:auto; padding:0 30px}

.sekaDetail{ background:#fff;transition: all .3s;}
.sekaDetail .header-main{ background:none}
.sekaDetail:after{ position:fixed; left:0; top:0; z-index:-1; content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,.3)}
.sekaDetail .focusimgbg{ position:fixed; left:0; top:0; z-index:-2; content:""; display:block; width:100%; height:100%; text-align:right; opacity:.3;
    -webkit-filter: blur(60px); /* Chrome, Opera */
       -moz-filter: blur(60px);
        -ms-filter: blur(60px);    
            filter: blur(60px)
}
.sekaDetail .focusimgbg img{ height:100%}
.sekaDetail .bt{ float:right; margin-top:20px}
.sekaDetail .bt .btn{ float:right; background: #fff; border-color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .05); margin:0 0 0 20px}
.sekaDetail .card-body .mauto{ padding-left:450px}
.sekaDetail .focusimg{ position:fixed; left:30px; width:450px; height:800px;}
.sekaDetail .focusimg img{ position:relative; z-index:1; width:350px; height:502px;border-radius:10px;-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));}
.sekaDetail .focusimg:before{ position:absolute; right:90px; top:6px; content:""; display:block; width:350px; height:490px; background:rgba(255,255,255,.1); border-radius:10px}
.sekaDetail .focusimg:after{ position:absolute; right:83px; top:11px; content:""; display:block; width:350px; height:480px; background:rgba(255,255,255,.1); border-radius:10px}
.sekaDetail .info{ float:left; width:100%;}
.sekaDetail .info h3{ float:left; margin-right:30px; font-size:36px; font-weight:300; color:#fff}
.sekaDetail .info .num{ font-size:26px; font-weight:300; color:#fff}
.sekaDetail .info .sort{ float:left; width:100%; margin-top:20px}
.sekaDetail .info .tag{ float:left; margin:0 10px 10px 0; padding:5px 20px; border-radius:90px; background:#fff; color:#333}
.sekaDetail .seka{ background:none; padding:50px 1px}
.sekaDetail .seka .item{ margin:0 20px 100px 0}
.sekaDetail .seka .item span img{ border-radius:4px}
.sekaDetail .footer{ background:none}
.sekaDetail .footbar{ background:none; text-align:center; color:#fff}

.coloritem{ float:left;}
.colorimg{ width: 160px; margin-right: 20px;}
.colorimg img{ width: 160px; height: 100px; border-radius: 4px;}
.colorinfo{ flex: 1;}
.colorname{ font-size: 28px;}
.colornum{ color: #f80;}
.colortotal{ text-align: right; color: #bbb;}

.sekaDetail .layui-input-block{ margin:0}
/*详情联系方式*/
.con{ padding:30px 60px}
.con .info{ float: left; padding:20px 0; width: 100%;}
.con .info .label{ float:left; width:100px; font-size: 16px; color: #999; margin-right: 20px;}
.con .info .text{ margin-left:120px; font-size: 16px; line-height: 1.5em; text-align: justify; padding: 0 0 50px;}
.con .item{ float:left; width:100%; position: relative;  padding: 20px 0;}
.con .item:after{position: absolute;z-index: 3;right: 0;bottom: 0;left: 0;height: 1px;content: '';background: #eee;}
.con .item .avatar{ float:left; margin-right: 20px;}
.con .item .avatar img{ width: 80px; height: 80px; border-radius: 8px; background: #eee;}
.con .item .label{ float:left; width:100px; font-size: 16px; color: #999; margin-right: 20px;}
.con .item .title{ margin-left:120px; font-size: 26px;}
.con .item .text{ margin-left:120px; font-size: 16px;}
.con .pic{ float:left; width:100%; padding: 30px 0;}
.con .pic .li img{ margin:10px 0; width: 100%; padding: 0; border-radius: 10px;}
.con .item .sort{ display: flex; flex-wrap: wrap;}
.con .item .sort .tag{ color: #bbb; margin: 0 6px 0 0;}
/*色卡成分弹窗*/
/* .searchin{ padding-right:500px} */
.dc-ingredient-box{ width:100%; height:100%; background:rgba(0,0,0,0);position:absolute;left:0;top:0;z-index:999998;}
.dc-ingredient{width:465px;height:auto; position:absolute;left:50%; top:370px; margin:0 0 0 -711px; border-radius:6px; z-index:99999;background:#fff; box-shadow:-5px 0 10px rgba(0,0,0,.1);}

.dc-ingredient-box ul{width:auto; padding:0 30px 0 0; margin:0; background:#f1f1f1; overflow:hidden; border-radius:4px 0 0}
.dc-ingredient-box ul li{ position:relative; float:left; width:100%; height:30px;line-height:30px;}
.dc-ingredient-box ul li span{display:inline-block}
.dc-ingredient-box ul li span.fp,
.dc-ingredient-box ul li span.letter{width:40px;height:30px;line-height:30px;text-align:center;background:#fff;color:#607D8B;font-weight:bold;}
.dc-ingredient-box ul li span.letter{background:#849eab;font-weight:300; color:#fff}
.dc-ingredient-box ul li span.name{margin-left:10px; color:#000}
.dc-ingredient-box ul li span.en{color:#999;font-size:12px;margin-left:10px;}
.dc-ingredient-box ul li em{position:absolute; right:0; top:3px; width:24px;height:24px;line-height:24px;background:#fff;color:#a5b6c6;text-align:center;border-radius:2px;cursor:pointer; box-shadow:0 0 5px rgba(0,0,0,.05)}
.dc-ingredient-box ul li em.sub{ right:-28px; background:#a5b6c6; color:#fff; display:none}
.dc-ingredient-box ul li .inp{ position:absolute; right:0; top:2px; color:#2196F3; font-weight:700; width:50px;height:24px;line-height:24px;border:#ccdbed solid 1px;background: #fff;display:none; text-align:center; border-radius:2px}
.dc-ingredient-box ul li:hover{background:#fff}
.dc-ingredient-box ul li:hover em{color:#6c6}
.dc-ingredient-box ul li:hover em.sub{color:#fff}
.dc-ingredient-box ul li .only{ position:absolute; right:60px; top:0; display: none;}
.dc-ingredient-box ul li .only input{ float:left; margin:9px 5px 0}
.dc-ingredient-choose{ min-height:40px; padding:10px 10px 20px 20px; background:#fff; border-radius:6px 6px 0; color:#666;overflow:hidden;}
.dc-ingredient-tip em{color:#f00;margin-left:10px}
.dc-ingredient-choose span{ float:left; margin:10px 10px 0 0; color:#2190ff; font-size:14px; line-height:30px; padding:0 20px; border-radius:3px;font-family: Microsoft yahei; background:#f8fbff; border:1px solid #d2e9ff}
.dc-ingredient-choose span:after{content:","}
.dc-ingredient-choose span:last-child:after{ display:none}
.dc-ingredient-tip{ padding:20px 0 0; font-size:14px;line-height:40px;border:none; text-align:center;}
.dc-ingredient-btn{width:100%;text-align:center;padding:5px 0 15px;background:#fff; border-radius:0 0 6px 6px}
.dc-ingredient-btn span{display:inline-block;padding:10px 55px; background:#2190ff;color:#fff;border-radius:3px;font-size:15px;margin:0 5px;cursor:pointer}
.dc-ingredient-btn span.cancel{background:#e6e6e6;color:#555}
.dc-ingredient-btn span.clear{background:#f40;}
.dc-ingredient-tip span{width:15px;height:15px;background:#fff;display:inline-block;margin-right:10px; box-shadow:0 0 3px rgba(0,0,0,.1)}
.dc-ingredient-tip span.letter{background:#849eab;margin-left:15px}
.show{display:inline}


.smore{float: left;padding-top: 32px;}
.smore ul li{float: left; height: 30px; padding: 7px 10px; line-height: 30px; margin-left: 15px; border-radius: 5px;}
.smore ul li input{width: 60px; height: 100%; line-height: 100%; background: #fff; border:1px solid #d3e6f9; text-align: center; border-radius: 3px;}
.smore ul li.ingr{background: #2190ff; color:#fff}
.smore ul li.sh{ padding:0}
.smore ul li.sh i{ margin-left:10px}
.smore ul li button{ width:100px; height:44px; font-size:19px; color:#fff; border-radius:4px; background:#FF9800}
.smore ul li button.clear{background: #e5e5e5; color:#333}

@media screen and (max-width: 767px) {
    .seka{ width: auto; margin:0 0 0 -11px;}
}
@media screen and (max-width: 413px) {
}
@media screen and (max-width: 321px) {
}