/*------------ video ------------*/

.video-list {
    max-width: 1000px;
    margin: 0 auto;
    border-top: 2px dotted rgba(153, 153, 153, .3);
}

.video-list li {
    padding: 5px 0;
    border-bottom: 2px dotted rgba(153, 153, 153, .3);
}

.video-list li a {
    display: block;
    padding: 15px 20px;
    position: relative;
    border-radius: 10px;
}

.video-list li a:hover {
    background: url('../images/bg/bg04.png');
}

.video-list li a i {
    font-size: 26px;
    color: #7C3707;
    display: inline-block;
    vertical-align: middle;
}

.video-list li .name {
    color: #201C1C;
    margin: 0 0 0 20px;
    font-size: 18px;
    line-height: 1.2;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 85px);
}

.video-list li a:hover i,
.video-list li a:hover .name {
    color: #fff;
}

.video-list li .more {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff2626+30,881c35+100 */
    background: rgb(255, 38, 38);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 38, 38, 1) 30%, rgba(136, 28, 53, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 38, 38, 1) 30%, rgba(136, 28, 53, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 38, 38, 1) 30%, rgba(136, 28, 53, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff2626', endColorstr='#881c35', GradientType=0);
    /* IE6-9 */
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 25px;
    position: absolute;
    top: 50%;
    right: 20px;
    margin: -12px 0 0 0;
}

.video-list li .more:before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5.5px 0 5.5px 6px;
    border-color: transparent transparent transparent #fff;
    margin: 7px auto 0;
}

.video-list li a:hover .more {
    background: #fff;
}

.video-list a:hover .more:before {
    border-color: transparent transparent transparent #7C3707;
}


/*------------ detail ------------*/

.video-youtube {
    max-width: 848px;
    margin: 0 auto 60px;
}

.video-youtube iframe {
    height: 477px;
    width: 100%;
}

.video-detail {
    margin: 40px auto 0;
    max-width: 1000px;
}

.video-detail .title {
    margin: 0 0 35px;
    border-bottom: 1px solid rgba(204, 204, 204, .5);
}

.video-detail .title strong {
    display: inline-block;
    line-height: 36px;
    font-size: 17px;
    color: #7C3707;
    border-radius: 10px 10px 0 0;
    background: url('../images/bg/bg01.png');
    padding: 0 35px;
    position: relative;
}

.video-detail .title strong:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #C8B69D transparent transparent transparent;
    position: absolute;
    top: 100%;
    left: 50%;
    margin: 0 0 0 -6px;
}

.video-detail .title strong i {
    display: inline-block;
    vertical-align: middle;
    margin: 0 5px 4px 0;
}


/*------------ rwd ------------*/

@media screen and (max-width: 767px) {
    .video-youtube iframe {
        height: 350px;
    }
}

@media screen and (max-width: 480px) {
    .video-youtube iframe {
        height: 280px;
    }
}