/*一、首页布局样式设计*/
/*1.通用样式*/
*{padding: 0px; margin: 0px;}/*内外边距*/
/*2.整体*/
.container{width: 1100px; margin: 0 auto;}/*后：自动居中*/
/*3.内容区*/
/*布局*/
/*#content-wrapper{*/
    /*background-image: url(images/BG.png);*/
    /*style:" background-repeat:no-repeat ;background-size:100% 100%;background-attachment: fixed;";*/
/*}*/
#content-wrapper article{
    width: 650px;
    display: inline-block;/*水平呈现元素*/
    vertical-align: top;
    margin-right: 10px;/*右外边距*/
}
#content-wrapper aside{
    width: 400px;
    display: inline-block;
    vertical-align: top;
}
/*左边内容区最近新书和最近促销内容水平呈现*/
.article-section section{
    width: 290px;
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin: 10px 0 10px 10px;
}
/*右边边栏区图书分类和合作伙伴内容水平呈现*/
.aside-section{
    width: 180px;
    display:inline-block;
    vertical-align: top;
    margin-right: 5px;
}
.article-section section h3{
    margin: 5px 0 10px 0;
}
/*定义最近新书和最近促销下边框虚线为：1像素灰色虚线*/
.article-section{
    border-bottom: #CCC dashed 1px;
    margin-bottom: 10px;
}
/*设置本周推荐图书封面图像和介绍文字水平呈现，关于书店图像和文字介绍水平呈现*/
/*本周推荐*/
.recommend img{
    display: inline-block;
    width: 200px;
    height: 200px;
    margin-bottom: 10px;
}
.recommend .recommend-content{
    display: inline-block;
    width: 420px;
    vertical-align: top;
    box-sizing: border-box;/*padding和border被包含在定义的width和height之内*/
    padding-right: 20px;
}
/*关于书店*/
.about img{
    display: inline-block;
    width: 380px;
    box-sizing: border-box;
    padding: 10px 10px;
}
.about p{
    display: inline-block;
    width: 380px;
    vertical-align: top;
    box-sizing: border-box;
    padding-bottom: 10px;
}

/*二、文本*/
body{font: 62.5%/1.4 "微软雅黑",Verdana,Arial,Helvetica,sans-serif;}
h1,h2,h3,h4,h5,h6{font-size: 1.6em;}
p,a,span{font-size: 1.4em;}
p{text-indent: 2em; text-align: justify;}/*首行缩进2字符 两端对齐*/
ul{list-style-type: none;}
img{border: none;}
mark{background-color: #e3b503; color: #FFFFFF;}

/*三、背景*/
/*页眉*/
header{
    height: 150px;
    background-image: url(images/header.png);
    position: relative;
}
/*导航菜单*/
#nav{background-image: url(images/navbg.jpg); height: 60px;}
/*页脚*/
#footer-wrapper{background-image: url(images/navbg.jpg); height: 60px;}
/*标题*/
h2[id^="title"]{/*选择具有id属性且属性值以title开头的每个元素*/
    color: #191970;                             /*属性和多个值选择器*/
    margin-top: 5px;                            /*[id$="title"]选择具有id属性且属性值以title结尾的每个元素*/
    padding-bottom: 5px;                        /*[id*="title"]选择具有id属性且属性值包含title子串的每个元素*/
    background-image: url(images/bullet.png);   /*[id~="title"]选择具有指定属性且属性值为一用空格分隔的字词列表，其中一个等于指定值的元素*/
    background-repeat: no-repeat;               /*[id|="title"]选择具有指定属性且属性值为一用连字符分隔的字词列表，由指定值开始的元素*/
    padding-left: 30px;
    border-bottom: 1px solid #191970;
}
#title1{background-position: 0 -3px;}
#title2{background-position: 0 -38px;}
#title3{background-position: 0 -68px;}
#title4{background-position: 0 -98px;}
#title5{background-position: 0 -128px;}
#title6{background-position: 0 -155px;}
#title7{background-position: 0 -182px;}
/*最近促销*/
.promotion{
    width: 610px;
    padding: 10px 10px;
    /*margin: 10px;*/
}

/*细节*/
/*本周推荐*/
.recommend h3{
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
}
.recommend{
    border-bottom: #CCC dashed 1px;
    position: relative;
}
.recommend .cartmore{
    width: 98%;
    text-align: right;
    margin-bottom: 10px;
}
/*间隔图像*/
.border{text-align: center; margin: 10px 0;}
.border img{width: 370px;}
/*边栏广告*/
section#advert a{display: block;}
section#advert img{width: 370px;}
section#advert {margin: 10px 0;}
/*关于书店*/
.about h2{margin-bottom: 10px;}
/*页脚 文字*/
footer section{float: right;}
#copyright{
    color: #000000;
    text-align: center;
    font-size: 1.6em;
    margin: 30px auto;
}
/*页眉logo*/
#logo {position: absolute; top: 25px; left: 90px;}
#logo a{font-size: 1.8em; color: #ffffff; text-decoration: none;}
#logo a h1{font-weight: normal;}

/*四、伪类*/
/*页眉logo*/
#logo a h1:first-letter{font-size: 140%;}
/*水平菜单*/
nav ul li{display: inline-block;}
nav ul a{
    display: inline-block;
    line-height: 60px; width: 100px; text-align: center;
    border-right: solid 1px #191970;
    color: #ffffff; text-decoration: none; font-size:1.8em;
    transition:background 0.5s linear;
}
nav ul a:hover{background-color: #191970;}
/*垂直菜单*/
nav{z-index: 100; background-image:url("images/navbg.jpg");}/*z-index: 100;保证菜单项显示在最上面*/
/*多级菜单*/
#nav nav ul li{position: relative;}
#nav nav ul ul li{background-image:url("images/navbg.jpg");}
#nav nav ul ul li a{border-left: solid 1px #191970; border-right: solid 1px #191970; border-bottom: solid 1px #191970;}
#nav nav ul ul{visibility: hidden; position: absolute; left:-1px; background-image:url("images/navbg.jpg");}
#nav nav ul li:hover ul{visibility: visible; z-index: 100;}
/*导航购物车超链接*/
#nav nav{position: relative;}
#menu-logo{position: absolute; right: 0px; top: 10px;}
#menu-logo a{
    display: inline-block;
    color: black;
    text-decoration: none;
    font-size: 1.8em;
    line-height: 40px;
    text-align: center;
    padding-left: 40px;
    padding-right: 15px;
    background-image: url(images/cart.gif);
    background-repeat: no-repeat;
    background-position: 10px 12px;
    background-color: #f3f3f3;
}
#menu-logo a:hover{color: #FF0000;}
/*本周推荐图书封面图像*/
.recommend img{opacity: 0.8;}
.recommend img:hover{opacity: 1;}
/*站内搜索*/
#search{position: absolute; top: 111px; left: 730px; text-align: right;}
#search input[type="search"]{
    font-family: 微软雅黑;
    background: #f3f3f3;
    border: #CCC 1px solid;
    height: 30px;
    line-height: 30px;
    width: 200px;
    font-size: 1.6em;
    padding-left: 5px;
    display: inline-block;
    vertical-align: top;
}
#search input[type="submit"]{
    font-family: 微软雅黑;
    background-color: #b4b4b4;
    color: #fff;
    border: #b4b4b4 1px solid;
    height: 30px;
    display: inline-block;
    font-size: 1.6em;
    vertical-align: top;
    padding: 0 10px;
}
/*加入购物车*/
.cart{
    text-decoration: none;
    background: #FF0000;
    color: #FFFFFF;
    line-height: 25px;
    display: inline-block;
    text-align: center;
    width: 80px;
    opacity: 0.7;
}
.cart:hover{text-decoration: none;  opacity: 1;}
/*详细内容*/
.more{
    text-decoration: none;
    background: #a15b39;
    color: #FFFFFF;
    line-height: 25px;
    display: inline-block;
    text-align: center;
    width: 80px;
    opacity: 0.7;
}
.more:hover{text-decoration: none;  opacity: 1;}
/*图书分类和合作伙伴超链接*/
.aside-section li a{text-decoration: none; color: #000;}
.aside-section a:hover{text-decoration: none; color: #191970;}
.aside-section ul{margin: 10px 0 10px 20px;}
/*页脚超链接*/
footer a{
    display: block;
    float: left;
    color: #FFF;
    text-decoration: none;
    width: 100px;
    text-align: center;
    line-height: 60px;
    font-size: 1.6em;
}
#copyright a{text-decoration: none; color: #000;}
#copyright a:hover{text-decoration: none; color: #191970;}
/*最近新书*/
.effect-1 img{vertical-align: middle; width: 290px;}
.text-desc{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 88%;
    margin-bottom: 25px;
    padding: 10px 10px 10px 18px;
    opacity: 0;
    z-index: -1;/*层叠顺序为在其它元素下面*/
}
.effect-1{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,0,0,0.3);
    perspective: 800px;
}
.effect-1:hover.image-box{
    transform: rotateX(75deg);
    transition: 1s;
    transform-origin: center bottom;
}
.effect-1:hover.text-desc{
    opacity: 1;
    transition: 2s;
}
.btn{
    display: inline-block;
    padding: 2px 10px;
    font-size: 14px;
    color: #fff;
    border: 1px solid #FF0000;
    background-color: #FF0000;
    text-decoration: none;
    transition: 0.4s;
}
.btn:hover{
    background-color: transparent;
    color: #FF0000;
    transition: 0.4s;
}
/*畅销图书*/
#best-selling li:before{
    content: counter(listxh);
    background: #191970;
    padding: 2px 5px;
    color: #fff;
    margin-right: 5px;
    vertical-align: top;
}
#best-selling li{
    counter-increment: listxh;
    display: inline-block;
    width: 100%;
    vertical-align: bottom;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 8px;
    transition: text-shadow 1s linear;
    border-bottom: #CCC dashed 1px;
}
#best-selling .curr .p-img{display: inline-block;}
#best-selling .curr .p-name{
    display: inline-block;
    vertical-align: top;
}
#best-selling .curr .p-name strong{
    display: block;
    color: #FF0000;
    text-align: left;
    margin-top: 20px;
    font-size: 1.4em;
}
#best-selling .curr .p-name del{font-size: 1.4em; font-weight: 900;}
#best-selling .curr {display: none;}
#best-selling a{color: #000000; text-decoration: none; font-size: 1.6em;}
#best-selling li:hover{text-shadow: 1px 4px 4px #000;}
#best-selling li:hover .selling{display: none;}
#best-selling li:hover .curr{display: inline-block;}
/*清除图片链接样式*/
img{border: 0;}

/*五、模板 分页面设计*/
/*面包屑导航*/
.crumb-nav {font-size: 1.4em; margin: 5px 0;}
.crumb-nav a{text-decoration: none; color: #000; font-size: 1em;}
.crumb-nav a：hover,.crumb-nav a：visited{color: #191970;}

/*书籍分类页面*/
.piclist ul{display: flex;}
.piclist li{ text-align: center; margin: 10px 5px; }
.piclist li img{
    width: 192px;
    border-radius: 10px;
    transition: all 1s ease;
    border: 1px solid #191970;
}
.piclist li:nth-child(3n+1){margin-left: 10px;}
.piclist li:nth-child(3n+3){margin-right: 10px;}
.piclist li:hover img{transform: scale(1.1);}
/*分页导航*/
#pagebar {text-align: right; margin-top: 10px; margin-right: 10px;}
#pagebar a{
    font-size: 1.6em;
    text-decoration: none;
    color: #FFF;
    background-color: #4169E1;
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    color: #FFFFFF;
    transition: all 0.5s ease;
    padding-top: 3px;
}
#pagebar a:hover{z-index: 100; opacity: .5; transform: scale(1.1);}
#pagebar .arrow{width: 60px;}

/*特刊降价页面*/
.specials{
    border-bottom: #CCC dashed 1px;
    border-top: #CCC dashed 1px;
    margin: 10px 0;
    display: flex;
    padding: 10px;
    transition: background-color 1s ease;
}
.specials a{display: block; vertical-align: bottom;}
.specials img{width: 160px; height: 160px;}
.specials div h3{text-align: center;}
.specials div strong{color: #FF0000;}
.specials:hover{background-color: #FF0000;}
.specials:hover div,.specials:hover strong{color: #FFFFFF;}

/*联系我们页面*/
.contacts p{padding: 10px;}
.contact-form{border: #4169E1 1px dashed; font-size: 1.4em; margin: 0 10px;}
.form-subtitle{background: #4169E1; color: #FFF; padding: 2px 5px; }
.contact{text-align: right; width: 100px; }
.contact-input{width: 300px; border: #CCC 1px solid;}
.form-row{padding: 2px 10px;}
.form-row-button{padding: 5px; width: 100%;}
.send{
    color: #FFF;
    height: 24px;
    width: 53px;
    text-align: center;
    background-color: #4169E1;
    border: 0px;
}

/*关于我们页面*/
#video p{margin: 10px 10px;}
.video{text-align: center;}

/*详细内容页面*/
.bookname{margin: 10px; text-align: center;}
.infobook{
    display: flex;
    padding: 10px;
    border: 1px solid #191970;
    border-radius: 5px;
    margin: 10px 0;
}
.infobook img{
    width: 300px;
    height: 300px;
    box-shadow: 3px 3px rgba(0,0,0,.2);
    border: solid 1px #cccccc;
}
.infobook .infobookt{margin-left: 20px;}
.infobook .infobookt h3{text-align: center; margin-bottom: 10px;}
.infobook .infobookt div{text-align: right}
.infobook .infobookt li{font-size: 1.4em;}
.infobookc{
    border-radius: 5px;
    transition: all 1s ease;
    border: 1px solid #191970;
    padding: 10px;
}
/*分享工具栏*/
.title-bar p,.title-bar div{display: inline-block; vertical-align: top}
.title-bar p{padding-top: 3px;font-size: 1.6em;}
.title-bar{background-color: #f3f3f3; text-align: right;}
/*相关阅读*/
.context {margin: 10px 0;}
.context p{font-size: 1em; background-color: #f3f3f3; line-height: 30px;}
.context a{text-decoration: none; color: #000; background-color: #f3f3f3;}
.context a:hover{text-decoration: none; color: #191970;}
.infobookc p{padding-bottom: 5px;}

/*购物车*/
.cartt{margin: 10px 5px;}
.cart-table{
    font-size: 1.4em;
    width: 100%;
    border-collapse: collapse;/*合并边框*/
    border: 1px solid #eee8e1;
    margin: 10px 0;
}
.cart-table tr, td{border: 1px solid #eee8e1;}/*单元格边框*/
.cart-title,.cart-total{
    background-color: #eee8e1;/*第一行和最后一行背景色*/
    line-height: 25px;
}
.cart-table td h3{font-size: 1em; text-align: center;}
.cart-table img{width: 100px; height: 100px;}
.td-right{text-align: right}
.cart-total a{
    display: inline-block;
    background-color: #FF0000;
    color: #FFFFFF;
    font-size: 1.1em;
    padding: 0 10px;
    text-decoration: none;
}
.td-center{text-align: center; width: 100px; height: 100px;}

/*六、JS*/
/*首页时间显示*/
#displaydate{position: absolute; top: 20px; left: 650px; color: #FFF;}
#displaytime{position: absolute; top: 20px; left: 810px; color: #FFF;}
/*首页图像切换*/
#adv{
    position: relative;
    margin: 10px;
    border: 5px solid #191970;
    box-shadow: 5px 5px 5px #6F605A;
}
#adv dl,#adv dd{list-style:none;}
#adv dt{position: absolute; bottom: 5px; right: 5px;}
#adv dd{overflow: hidden; width: 600px; height: 230px;}
#adv dl dt a{
    display: block;
    float: left;
    width: 17px;
    height: 17px;
    margin: 2px;
    border: #191970 solid 1px;
    border-radius: 15px;
    background-color: #6F605A;
    color: #FFF;
    text-decoration: none;
    text-align: center;
    padding: 0px;
    font-size: 12px;
}
#adv dl dt a:hover{background-color: #4169E1;}
/*联系我们 表单提交验证*/
#message{visibility: hidden;}
#submitmessage{padding: 5px 10px;}