﻿/*!
 * layui-carousel.css —— 从 layui v2.5.6 中抽取的「仅轮播」作用域样式
 *
 * 背景：
 *   父页面（Index/index.html）是 Bootstrap 框架，而头部用到 layui 的 carousel。
 *   完整版 layui.css 自带全局 reset，且它在 Bootstrap 之后加载，会覆盖 Bootstrap 脚手架，例如：
 *     body{line-height:24px;font:14px ...}                              -> 覆盖 Bootstrap 行高/字体
 *     a{color:#333}                                                     -> 覆盖 Bootstrap 链接蓝 #337ab7
 *     blockquote,body,button,h1~h6,input,li,ol,p,ul{margin:0;padding:0} -> 清除标题/段落外边距
 *     li{list-style:none}                                               -> 去掉列表符号
 *     h4,h5,h6{font-size:100%}                                          -> 标题字号塌陷
 *   因此这里只保留 .layui-carousel 作用域内的规则，彻底避免污染 Bootstrap 页面。
 *
 * 说明：
 *   - 头部轮播使用 arrow:'none'，不依赖 layui-icon 字体，故未内联图标字体；
 *   - 若后续需要 layui 其它组件，请改回完整 layui.css，并在其后补齐 Bootstrap 兼容层。
 */

/* ===== 作用域内的最小 reset（替代 layui 的全局 reset） ===== */
.layui-carousel,
.layui-carousel *,
.layui-carousel *:before,
.layui-carousel *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.layui-carousel-ind ul { margin: 0; list-style: none; }
.layui-carousel li { list-style: none; }

/* ===== carousel 规则（自 layui v2.5.6 原样抽取，共 43 条） ===== */
.layui-carousel {position:relative;left:0;top:0;background-color:#f8f8f8}
.layui-carousel>[carousel-item] {position:relative;width:100%;height:100%;overflow:hidden}
.layui-carousel>[carousel-item]:before {position:absolute;content:'\e63d';left:50%;top:50%;width:100px;line-height:20px;margin:-10px 0 0 -50px;text-align:center;color:#c2c2c2;font-family:layui-icon!important;font-size:30px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.layui-carousel>[carousel-item]>* {display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#f8f8f8;transition-duration:.3s;-webkit-transition-duration:.3s}
.layui-carousel-updown>* {-webkit-transition:.3s ease-in-out up;transition:.3s ease-in-out up}
.layui-carousel-arrow {display:none\9;opacity:0;position:absolute;left:10px;top:50%;margin-top:-18px;width:36px;height:36px;line-height:36px;text-align:center;font-size:20px;border:0;border-radius:50%;background-color:rgba(0,0,0,.2);color:#fff;-webkit-transition-duration:.3s;transition-duration:.3s;cursor:pointer}
.layui-carousel-arrow[lay-type=add] {left:auto!important;right:10px}
.layui-carousel:hover .layui-carousel-arrow[lay-type=add],.layui-carousel[lay-arrow=always] .layui-carousel-arrow[lay-type=add] {right:20px}
.layui-carousel[lay-arrow=always] .layui-carousel-arrow {opacity:1;left:20px}
.layui-carousel[lay-arrow=none] .layui-carousel-arrow {display:none}
.layui-carousel-arrow:hover,.layui-carousel-ind ul:hover {background-color:rgba(0,0,0,.35)}
.layui-carousel:hover .layui-carousel-arrow {display:block\9;opacity:1;left:20px}
.layui-carousel-ind {position:relative;top:-35px;width:100%;line-height:0!important;text-align:center;font-size:0}
.layui-carousel[lay-indicator=outside] {margin-bottom:30px}
.layui-carousel[lay-indicator=outside] .layui-carousel-ind {top:10px}
.layui-carousel[lay-indicator=outside] .layui-carousel-ind ul {background-color:rgba(0,0,0,.5)}
.layui-carousel[lay-indicator=none] .layui-carousel-ind {display:none}
.layui-carousel-ind ul {display:inline-block;padding:5px;background-color:rgba(0,0,0,.2);border-radius:10px;-webkit-transition-duration:.3s;transition-duration:.3s}
.layui-carousel-ind li {display:inline-block;width:10px;height:10px;margin:0 3px;font-size:14px;background-color:#e2e2e2;background-color:rgba(255,255,255,.5);border-radius:50%;cursor:pointer;-webkit-transition-duration:.3s;transition-duration:.3s}
.layui-carousel-ind li:hover {background-color:rgba(255,255,255,.7)}
.layui-carousel-ind li.layui-this {background-color:#fff}
.layui-carousel>[carousel-item]>.layui-carousel-next,.layui-carousel>[carousel-item]>.layui-carousel-prev,.layui-carousel>[carousel-item]>.layui-this {display:block}
.layui-carousel>[carousel-item]>.layui-this {left:0}
.layui-carousel>[carousel-item]>.layui-carousel-prev {left:-100%}
.layui-carousel>[carousel-item]>.layui-carousel-next {left:100%}
.layui-carousel>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel>[carousel-item]>.layui-carousel-prev.layui-carousel-right {left:0}
.layui-carousel>[carousel-item]>.layui-this.layui-carousel-left {left:-100%}
.layui-carousel>[carousel-item]>.layui-this.layui-carousel-right {left:100%}
.layui-carousel[lay-anim=updown] .layui-carousel-arrow {left:50%!important;top:20px;margin:0 0 0 -18px}
.layui-carousel[lay-anim=updown]>[carousel-item]>*,.layui-carousel[lay-anim=fade]>[carousel-item]>* {left:0!important}
.layui-carousel[lay-anim=updown] .layui-carousel-arrow[lay-type=add] {top:auto!important;bottom:20px}
.layui-carousel[lay-anim=updown] .layui-carousel-ind {position:absolute;top:50%;right:20px;width:auto;height:auto}
.layui-carousel[lay-anim=updown] .layui-carousel-ind ul {padding:3px 5px}
.layui-carousel[lay-anim=updown] .layui-carousel-ind li {display:block;margin:6px 0}
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this {top:0}
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev {top:-100%}
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next {top:100%}
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-carousel-prev.layui-carousel-right {top:0}
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-left {top:-100%}
.layui-carousel[lay-anim=updown]>[carousel-item]>.layui-this.layui-carousel-right {top:100%}
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev {opacity:0}
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-next.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-carousel-prev.layui-carousel-right {opacity:1}
.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-left,.layui-carousel[lay-anim=fade]>[carousel-item]>.layui-this.layui-carousel-right {opacity:0}

/* ===== 作用域收尾（必须位于抽取规则之后才能生效） ===== */
/* 未初始化前的 loading 字形依赖 layui-icon 字体，这里关闭以免出现方块 */
.layui-carousel > [carousel-item]:before { content: none !important; }
