@charset "UTF-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, 'Lucida Grande', Arial, 'Hiragino Sans GB', 'WenQuanYi Micro Hei', STHeiti, SimSun, sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; } a { text-decoration: none; cursor: pointer; } a:hover { text-decoration: none; } * { box-sizing: border-box; } img { max-width: 100%; height: auto; vertical-align: top; -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; } i, em { font-style: normal; } li { list-style: none; } html { font-size: 16px; } button, input, select, textarea { font-size: 100%; border: none; outline: none; } .wrap { width: 100%; max-width: 1400px; margin: 0 auto; } .clearfix:after { content: " "; display: block; height: 0px; visibility: hidden; clear: both; } .clearfix { zoom: 1; } .l { float: left; } .r { float: right; } .header { position: relative; margin: 0 auto; max-width: 1920px; } .header:before { background: url(/ban1/briquette-machine-images/banner_bg.jpg) no-repeat; background-size: cover; content: ""; display: block; position: absolute; left: 0; top: 0; max-width: 1640px; width: 100%; height: 900px; z-index: -1; } .head-nav { padding: 45px 50px 0 100px; } .logo { float: left; } .nav { float: left; margin-left: 5%; } .nav li { display: inline-block; } .nav li a { font-size: 22px; color: #fff; margin-left: 80px; font-weight: 200; line-height: 64px; } .lyb { float: right; font-size: 20px; color: #009fa0; width: 180px; height: 50px; line-height: 50px; text-align: center; font-weight: bold; border: 1px solid #009fa0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; margin-top: 7px; position: relative; overflow: hidden; } .lyb:before { content: ''; z-index: -1; position: absolute; top: 50%; left: 50%; width: 180px; height: 50px; border-radius: 50%; background-color: #009fa0; transform-origin: center; transform: translate3d(-50%, -50%, 0) scale3d(0, 0, 0); } .lyb:hover { color: #fff; } .lyb:hover:before { transform: translate3d(-50%, -50%, 0) scale3d(15, 15, 15); transition: transform 1s ease-in-out; -webkit-transition: transform 1s ease-in-out; -moz-transition: transform 1s ease-in-out; -ms-transition: transform 1s ease-in-out; -o-transition: transform 1s ease-in-out; } .head-deil { margin-top: 100px; overflow: hidden; padding: 0 144px; } .deil-left { float: left; width: 50%; } .deil-left h1 { font-size: 80px; color: #fff; position: relative; width: 500px; text-transform: uppercase; margin-bottom: 130px; } .deil-left h1:before { width: 1px; height: 60px; background: #fff; content: ""; display: block; position: absolute; bottom: -70px; left: 110px; } .deil-left p { font-size: 22px; color: #fff; font-weight: bold; text-transform: capitalize; margin-bottom: 40px; } .deil-left p strong { font-size: 34px; color: #eb8c04; } .deil-left p span { font-size: 22px; color: #fff; font-weight: 100; text-transform: initial; } .deil-swt { margin-top: 50px; } .chat-online { display: inline-block; background: #db8100; background-image: linear-gradient(100deg, #ffbb5a 5%, #db8100 50%, #ffbb5a); background-position: left center; background-size: 200% 100%; background-repeat: no-repeat; width: 240px; height: 74px; line-height: 74px; text-align: center; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; font-size: 26px; color: #fff; box-shadow: 0 0 20px rgba(219, 129, 0, .3); cursor: pointer; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; } .chat-online:hover, .deil-swt a:hover { background-position: right center; transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; } .deil-swt a { display: inline-block; background: #12c7c8; background-image: linear-gradient(100deg, #8be3e4 5%, #12c7c8 50%, #8be3e4); background-position: left center; background-size: 200% 100%; background-repeat: no-repeat; width: 240px; height: 74px; line-height: 74px; text-align: center; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; font-size: 26px; color: #fff; margin-left: 40px; box-shadow: 0 0 20px rgba(64, 200, 201, .3); transition: all .5s ease; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -ms-transition: all .5s ease; -o-transition: all .5s ease; } .pro-pic { float: right; margin-top: 30px; width: 50%; } .index-content { margin-top: 160px; max-width: 1920px; margin-left: auto; margin-right: auto; } h2 { font-size: 46px; color: #333; position: relative; margin: 100px 0; } h2:before { width: 75px; height: 4px; background: url(/ban1/briquette-machine-images/h2_bg.jpg) no-repeat; background-size: cover; position: absolute; bottom: -40px; left: 0; content: ""; display: block; } .index-content p { font-size: 22px; color: #333; line-height: 1.8em; margin-bottom: 40px; } .index-content li { margin-bottom: 10px; } .index-content li p { margin-bottom: 0; } .adva-box { position: relative; } .index-content .chat-online { position: absolute; bottom: 0; right: 0; } .pic { margin-top: 80px; overflow: hidden; } .wide-box { position: relative; background: url(/ban1/briquette-machine-images/pj_three.jpg) no-repeat; background-size: cover; padding: 57px 0; margin-top: 100px; } .wide-box h2 { color: #fff; } .wide-box ul { margin-bottom: 50px; } .wide-box p { color: #fff; } .wide-box h2 { margin-top: 0; } .wide-box h2:before { background: url(/ban1/briquette-machine-images/h2_bg.png) no-repeat; } .table h2 { margin-bottom: 40px; } .table h2:before { background: none; } .bg { background: url(/ban1/briquette-machine-images/bg.png) no-repeat; background-size: cover; width: 247px; height: 50px; text-align: center; line-height: 50px; font-size: 18px; color: #fff; font-weight: bold; } table { margin-top: 50px; } td { padding: 15px 10px; font-size: 18px; } .slick-slide:focus { outline: none; } .case-box { position: relative; } .case-box:before { width: 1106px; height: 627px; background: url(/ban1/briquette-machine-images/case_bg.png) no-repeat; background-size: cover; content: ""; display: block; position: absolute; right: 0; top: 235px; z-index: -1; } .ban-item { position: relative; } .ban-item.one:before { position: absolute; right: 0; bottom: 0; width: 176px; height: 345px; content: ""; display: block; background: url(/ban1/briquette-machine-images/case_kh1.png) no-repeat; background-size: cover; } .ban-item.two:before { position: absolute; right: 0; bottom: 0; width: 176px; height: 345px; content: ""; display: block; background: url(/ban1/briquette-machine-images/case_kh2.png) no-repeat; background-size: cover; } .case-ban { float: left; width: 50%; } .case-ban strong { display: block; font-size: 38px; color: #eee; letter-spacing: 45px; font-weight: normal; margin-left: 20px; margin-top: -20px; } .case-xq { width: 50%; float: left; margin-top: 130px; padding-left: 30px; } .case-xq h3 { font-size: 30px; color: #fff; position: relative; } .case-xq h3:before { width: 60px; height: 4px; background: #fff; content: ""; display: block; position: absolute; bottom: -30px; left: 0; } .case-xq li { font-size: 22px; color: #fff; font-weight: 100; position: relative; padding-left: 33px; } .case-xq li:before { width: 12px; height: 12px; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; content: ""; display: block; position: absolute; left: 0; top: 8px; background: #009fa0; } .case-xq strong { font-size: 24px; font-weight: normal; display: block; color: #fff; margin: 40px 0 30px; } .case-xq p { font-size: 20px; line-height: 2em; color: #fff; font-weight: 100; } .case-xq ul { margin-top: 90px; } .case-xq li { font-size: 22px; color: #d8fcfc; margin-top: 15px; } .case-box .slick-prev, .case-box .slick-next { top: 90%; bottom: 0; z-index: 999; } .case-box .slick-prev { left: 0; } .case-box .slick-next { left: 75px; } .case-box .slick-prev:before { width: 54px; height: 54px; background: url(/ban1/briquette-machine-images/z_left.png) no-repeat; background-size: cover; display: block; } .case-box .slick-next:before { width: 54px; height: 54px; background: url(/ban1/briquette-machine-images/y_right.png) no-repeat; background-size: cover; display: block; } .paging { position: absolute; left: 38%; bottom: 30px; } .paging .cur { font-size: 26px; color: #009fa0; font-weight: bold; } .paging .sep, .paging .full { font-size: 20px; color: #009fa0; } .case-box .slick-dots { bottom: 5px; text-align: left; left: 20%; width: auto; } .case-box .slick-dots li button { width: 120px; height: 6px; background: #009fa0; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; margin: 0; padding: 0; } .case-box .slick-slider .slick-active button { width: 120px; height: 2px; background: #666; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; } .index-history { background: url(/ban1/briquette-machine-images/history_bg.jpg) no-repeat; background-size: cover; margin-top: 220px; padding-bottom: 35px; } .history-one h2 { color: #fff; margin: 70px 0 100px; } .history-one h2:before { background: url(/ban1/briquette-machine-images/h2_bg.png) no-repeat; } .index-history strong { font-size: 24px; color: #d5eded; display: block; margin-bottom: 5px; } .index-history li { margin-left: 3px; } .index-history li, .index-history p { font-size: 20px; line-height: 2em; color: #d5eded; font-weight: 100; } .history-one .pic { float: left; margin-top: -50px; width: 44%; margin-top: -180px; } .history-one .one-right { float: left; width: 56%; } .history-two { margin-top: 60px; } .two-left { float: left; width: 55%; margin-top: 60px; } .slick-right { float: right; width: 41%; } .cf-wz { overflow: hidden; } .slick-right span { font-size: 24px; color: #fff; background: #009fa0; width: 260px; height: 75px; text-align: center; line-height: 55px; display: block; border-radius: 20px 20px 0 0; -webkit-border-radius: 20px 20px 0 0; -moz-border-radius: 20px 20px 0 0; -ms-border-radius: 20px 20px 0 0; -o-border-radius: 20px 20px 0 0; float: right; position: relative; padding-left: 35px; margin-right: 5px; } .slick-right span:before { width: 11px; height: 20px; background: url(/ban1/briquette-machine-images/sj.png) no-repeat; background-size: cover; content: ""; display: block; position: absolute; top: 18px; left: 50px; } .slick-cf { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; margin-top: -20px; } .slick-cf img { border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .slick-cf .slick-prev:before, .slick-cf .slick-next:before { display: block; } .slick-cf .slick-prev:before { width: 54px; height: 54px; background: url(/ban1/briquette-machine-images/z_left.png) no-repeat; } .slick-cf .slick-next:before { width: 54px; height: 54px; background: url(/ban1/briquette-machine-images/y_right.png) no-repeat; } .slick-cf .slick-prev, .slick-cf .slick-next { top: 80%; } .slick-cf .slick-prev { left: -30%; } .slick-cf .slick-next { left: -16%; } .index-purchase { position: relative; } .purchase-right { position: absolute; right: 0; top: 125px; } .purchase { width: 60%; margin-top: 160px; } .purchase li { font-size: 22px; color: #060606; line-height: 2.2em; } .wait-box { position: relative; margin-top: 150px; } .wait-box:after { position: absolute; right: 0; top: 0; background: url(/ban1/briquette-machine-images/wait_bg.png) no-repeat; content: ""; display: block; width: 87%; height: 200px; } .wait-box p { display: inline-block; font-size: 36px; color: #fff; font-style: italic; } .wait-box .wrap { position: relative; z-index: 100; } .wait-box strong { margin-left: 135px; display: block; float: left; } .wait-box strong img { margin-top: 70px; display: block; } .wait-box p { float: left; margin-top: 75px; margin-left: 45px; } .wait-box span { display: block; float: right; margin-top: 65px; } .index-cact { padding: 80px 0 150px; background: url(/ban1/briquette-machine-images/cact_bg.jpg) center top no-repeat; margin-top: 250px; } .index-cact .cact-left { float: left; width: 58%; } .index-cact .cact-left strong { font-size: 55px; color: #fff; display: block; margin-bottom: 100px; } .index-cact .cact-left .message ul { margin-left: -10%; overflow: hidden; } .index-cact .cact-left .message ul li { float: left; position: relative; width: 41%; margin-left: 9%; margin-bottom: 30px; } .index-cact .cact-left .message ul li input { background: #3a3a3a; background: rgba(58, 58, 58, .5); width: 100%; padding: 25px 30px 25px 20px; } .index-cact .cact-left .message ul li.m-pro input { font-weight: 400; color: #2bd9db; opacity: 1; background: url(/ban1/briquette-machine-images/input_bg.png) no-repeat; background-size: cover; } .index-cact .cact-left .message ul li input { border: none; font-size: 20px; color: #fff; outline: none; width: 100%; font-weight: 100; } .index-cact .cact-left .message .msg-areas textarea { width: 100%; height: 250px; padding: 35px 25px; font-size: 20px; color: #fff; background: #3a3a3a; background: rgba(58, 58, 58, .5); font-weight: 100; line-height: 2em; resize: none; } .index-cact .cact-left .message ul li input::-webkit-input-placeholder, .index-cact .cact-left .message .msg-areas textarea::-webkit-input-placeholder { color: #fff; opacity: .6; } .message .line { width: 340px; height: 76px; line-height: 76px; text-align: center; background: #40c8c9; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; margin-top: 40px; box-shadow: 0 0 13px rgba(131, 158, 215, .5); } .message .line input { cursor: pointer; transition: all .5s ease; font-size: 24px; color: #333; font-weight: 400; text-transform: uppercase; width: 100%; height: 100%; background: transparent; -webkit-border-radius: 50px; } .message .line input[value] { color: #333; } .message .line:hover { background: #eb8c04; transition: all .5s ease; } .message .line:hover input { background: #eb8c04; color: #fff; } .index-cact .cact-right { float: right; width: 42%; padding-left: 3.5%; margin-top: 180px; } .index-cact .cact-right ul { overflow: hidden; margin-top: 80px; } .index-cact .cact-right ul li { float: left; width: 48%; margin-left: 6%; } .index-cact .cact-right ul li p { font-size: 18px; color: #e8e9f0; } .index-cact .cact-right ul li strong { font-size: 18px; color: #e8e9f0; font-weight: normal; } .index-cact .cact-right ul li.fr { float: right; width: 36%; } .pop-video { position: fixed; width: 100%; height: 100%; left: 0; top: -150%; transition: .3s; -ms-transition: .3s; -moz-transition: .3s; -webkit-transition: .3s; -o-transition: .3s; z-index: 9999; opacity: 0; filter: alpha(opacity=0); } .pop-video .pop-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .4); } .pop-video .close { position: absolute; right: 35px; top: 20px; width: 43px; height: 43px; background: url(/ban1/briquette-machine-images/close.png) center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; cursor: pointer; } .pop-video video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); max-width: 90%; } .pop-video.open { top: 0; opacity: 1; filter: alpha(opacity=100); } .pop-video .message { border-top: 8px solid #eb8c04; background: #fff; position: relative; z-index: 5; top: 20%; width: 1000px; left: 50%; margin-left: -500px; padding: 25px 160px 40px; } .pop-video .message strong { font-size: 28px; color: #3e4874; text-transform: uppercase; line-height: 48px; } .pop-video .message span { font-size: 16px; color: #eb8c04; display: block; background: #f4f4ff; border-radius: 30px; height: 48px; line-height: 48px; width: 230px; text-align: center; float: right; margin-right: 25%; } .pop-video .message { margin-top: 3px; } .pop-video .message li { border-bottom: 1px solid #d7d7ff; padding: 30px 0 10px 45px; position: relative; } .pop-video .message li:before { position: absolute; left: 12px; top: 50%; content: ""; display: block; } .pop-video .message li.icon-name:before { background: url(/ban1/briquette-machine-images/rw.png) no-repeat; background-size: 100% 100%; width: 14px; height: 15px; margin-top: 2px; } .pop-video .message li.icon-email:before { background: url(/ban1/briquette-machine-images/yx.png) no-repeat; background-size: 100% 100%; width: 16px; height: 13px; margin-top: 5px; } .pop-video .message li.icon-tel:before { background: url(/ban1/briquette-machine-images/dh.png) no-repeat; background-size: 100% 100%; width: 16px; height: 16px; margin-top: 2px; } .pop-video .message li input { font-size: 16px; color: #adabdc; height: 30px; width: 100%; } .pop-video input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset; } .pop-video .message li textarea { height: 120px; width: 100%; background: #f7f7f7; font-size: 16px; line-height: 1.5em; color: #adabdc; resize: none; padding: 20px 30px 20px 45px; } .pop-video .message li.last { border: none; padding: 25px 0; } .pop-video .message button { border: none; background: #eb8c04; width: 280px; height: 56px; line-height: 56px; color: #fff; font-size: 16px; border-radius: 10px; box-shadow: 0 0 20px rgba(94, 88, 246, 0.3); display: block; margin: 0 auto; position: relative; z-index: 1; cursor: pointer; } .pop-video .message button:before { content: ''; z-index: -1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #c1770c; transform-origin: center top; transform: scaleY(0); transition: 0.25s ease-in-out; border-radius: 10px; } .pop-video .message button:hover::before { transform-origin: center bottom; transform: scaleY(1); } .pop-video .message button:after { width: 21px; height: 19px; background: url(/ban1/briquette-machine-images/zfj.png) no-repeat; background-size: 100% 100%; content: ""; display: block; position: absolute; top: 50%; margin-top: -10px; right: 50px; } .pop-video .message li textarea::-webkit-input-placeholder { color: #adabdc; } .pop-video .message li textarea::-moz-placeholder { color: #adabdc; } .pop-video .message li textarea:-moz-placeholder { color: #adabdc; } .pop-video .message li textarea:-ms-input-placeholder { color: #adabdc; } /* 右侧固定 */ .fixed-right { position: fixed; right: 20px; bottom: 100px; z-index: 999; } .fixed-right p { font-size: 14px; color: #fff; margin-top: 8px; line-height: 1.1em; } .fixed-right .top { cursor: pointer; width: 120px; } .fixed-right .middle { cursor: pointer; margin-top: -15px; width: 150px; } .gotop { position: fixed; text-align: center; right: 62px; bottom: 10px; z-index: 999; cursor: pointer; border-radius: 50%; } /* 右侧固定 end*/ @media screen and (max-width: 1919px) { .header:before { width: 90%; height: 791px; } .nav { margin-left: 2%; } .head-nav { padding: 45px 5px 0 100px; } .lyb { width: 150px; } .nav li a { margin-left: 55px; } .deil-left h1 { font-size: 60px; } .head-deil { margin-top: 50px; padding: 0 90px; } .deil-left h1 { margin-bottom: 80px; } .paging { left: 28%; } .case-box .slick-dots { left: 12%; } .case-ban strong { letter-spacing: 20px; } } @media screen and (max-width: 1599px) { .head-nav { padding: 20px 5px 0 20px; } .header:before { height: 700px; } .deil-left h1 { font-size: 40px; } .chat-online, .deil-swt a { width: 180px; height: 50px; line-height: 50px; font-size: 18px; } .wrap { padding: 0 20px; } .index-content { margin-top: 50px; } h2 { margin: 70px 0; font-size: 38px; } .wide-box { padding: 60px 20px 40px 100px; } .case-box:before { width: 100%; background-color: #1c6868; } .purchase-right { width: 45%; } .purchase { margin-top: 60px; } .wait-box { margin-top: 70px; } .pic img { width: 95%; } } @media screen and (max-width: 1365px) { .header:before { height: 590px; } .nav li a { margin-left: 30px; } .lyb { width: 110px; font-size: 16px; } .case-box .slick-prev, .case-box .slick-next { top: 50%; } .paging { bottom: 180px; } .case-box .slick-dots { bottom: 150px; } .history-two, .two-left { margin-top: 20px; } .wait-box:after { width: 90%; } .wait-box span { margin-top: 75px; } .index-cact { margin-top: 150px; padding: 80px 0 150px; } .fixed-right .top { width: 120px; margin-left: 0; } .fixed-right .middle { width: 150px; margin-top: -15px; } } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto;} .slick-prev, .slick-next { position: absolute; display: block;  line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none; } .slick-prev:focus, .slick-next:focus { outline: none; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { filter:alpha(opacity=25);-moz-opacity:0.25;-khtml-opacity: 0.25; opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; filter:alpha(opacity=80);-moz-opacity:0.85;-khtml-opacity: 0.85; opacity: 0.85;; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-prev { left: -25px; } .slick-prev:before { content: "\2190"; } .slick-next { right: -25px; } .slick-next:before { content: "\2192"; } /* Dots */ .slick-dots { position: absolute; bottom:-25px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; } .slick-dots li { position: relative; display: inline-block; margin: 0px 5px; padding: 0px; cursor: pointer; } .slick-dots li button { border: 0; background: transparent; display: block; height: 16px; width:16px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer; outline: none; } .slick-dots li button:focus { outline: none; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 6px; line-height: 20px; text-align: center; /* color: black; */ filter:alpha(opacity=25);-moz-opacity:0.25;-khtml-opacity: 0.25; opacity: 0.25;; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slick-dots li.slick-active button:before { filter:alpha(opacity=75);-moz-opacity:0.75;-khtml-opacity: 0.75; opacity: 0.75; } .slick-dots li{ margin: 0;} .slick-dots li button { background-color: rgba(255, 255, 255, .3); border-radius: 50%; width: 10px; height: 10px; margin: 5px; } .slick-slider .slick-active button{ background-color:#000; width:24px; border-radius: 20px; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; transition: all 0.8s ease-in-out;}