@import "common.css";

.banner{
    width: 100%;
    height: auto;
}

@media screen and (max-width: 1920px) {
    .main {
        padding: 0 360px;
    }
}

@media screen and (min-width: 1200px) {
    .main {
        padding: 0 160px;
    }
}

@media screen and (min-width: 800px) {
    .main {
        padding: 0 80px;
    }
}

.main .container {
    width: 100%;
    display: flex;
    border-top: 2px solid #0084ff;
    padding-top: 40px;
}

.main ul {
    width: 170px;
    float: left;
}

.main ul li {
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    margin-bottom: 50px;
    padding-left: 25px;
    cursor: pointer;
}

.main ul li.active {
    padding-left: 20px;
    border-left: 5px solid #00c0ff;
}

.content {
    width: calc(100% - 70px);
    float: left;
    display: none;
}
.desc{
	text-indent:2em;
}

.item {
    display: inline-table;
    height: 280px;
    padding: 40px 0;
    border-bottom: 1px solid #505050;
}
.item:first-child {
    padding-top: 0;
}
.item:last-child {
    border-bottom: none;
}

.item .cover {
    width: 216px;
    height: 400px;
    float: left;
}

.item .divide {
    display: block;
    height: 280px;
    width: 80px;
    background: url("../image/divide1.png") center no-repeat;
    float: left;
}

.item div {
    width: calc(100% - 300px);
    display: inline-block;
    float: left;
}

.item div span {
    font-size: 24px;
    margin-bottom: 44px;
    display: block;
    color: rgb(229, 229, 229);
}

.item div p {
    font-size: 16px;
    color: rgb(255, 255, 255);
}

.item div button {
    margin: 54px auto 5px;
    float: right;
    width: 120px;
    height: 36px;
    background-color: rgb(41, 46, 43);
    border: 1px solid rgb(28, 97, 191);
    border-radius: 17px;
    color: rgb(255, 255, 255);
    outline: none;
    line-height: 36px;
    text-align: left;
    padding: 0 20px;
}

.item div button img {
    padding: 8px 0 8px 10px;
    position: absolute;
}