@charset "UTF-8";

/* reset
-----------------------------------------------*/
html{ height: 100%; color:#333; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{ margin:0; padding:0;}
body,button,input,select,textarea{ font:14px/1.5 arial,"Hiragino Sans GB", "Microsoft YaHei";}
input,select,textarea{ font-size:100%;}
table{ border-collapse:collapse; border-spacing:0;}
th{ text-align:inherit;}
fieldset,img{ border:0;}
iframe{ display:block;}
abbr,acronym{ border:0; font-variant:normal;}
del{ text-decoration:line-through;}
address,caption,cite,code,dfn,em,i,th,var{ font-style:normal; font-weight:500;}
ol,ul{ list-style:none;}
caption,th{ text-align:left;}
h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:500;}
a{ color:#333;}
a:hover{ color:#26b0e7; text-decoration:none;}
ins,a{ text-decoration:none;}
body {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-attachment: fixed;
}

/* skin
-----------------------------------------------*/
.skin-1 {
    background-color: #f3f0dc;
    background-image: url(http://www.0411hd.com/templets/images/yujiale/skin-bg-1.jpg);
}

/* common
-----------------------------------------------*/
.fn-clear:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.fn-clear { zoom:1;}
.fn-hide { display: none !important;}
.fn-left { float: left;}
.fn-right { float: right;}
.fn-fwb { font-weight: bold;}
.fn-relative { position: relative;}
.text-center { text-align: center;}
.f18 { font-size: 18px;}
.wrapper { width: 1200px; margin: 0 auto;}
.blue { color: #26b0e7;}
.gray { color: #999;}
.green { color: #8dbc00}
.mb10 { margin-bottom: 10px !important;}
.mb15 { margin-bottom: 15px !important;}
.boxshadow { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);}

/* header
-----------------------------------------------*/
.header {
    height: 96px;
}
.header .topbar {
    background: #26b0e7;
    height: 36px;
    line-height: 36px;
    font-size: 0;
    color: #fff;
}
.header .topbar a {
    margin-right: 10px;
    color: #fff;
    font-size: 12px;
}
.header .topbar a:hover {
    color: #fff8d8;
    border-bottom: 1px solid #fff8d8;
}
.header .brand {
    height: 60px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.header .brand .wrapper {
    position: relative;
    height: 60px;
    overflow: hidden;
}
.header .brand .logo {
    float: left;
    margin-top: 7px;
}
.header .brand .logo img {
    display: block;
    width: 190px;
    height: 50px;
}
.header .brand .slogan {
    position: absolute;
    left: 205px;
    top: 15px;
    height: 30px;
    line-height: 30px;
    border-left: 1px solid #eee;
    padding-left: 16px;
    font-size: 18px;
    color: #8dbc00;
}
.header .brand .nav {
    position: absolute;
    left: 400px;
    top: 15px;
    width: 800px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-align: right;
    font-size: 0;
}
.header .brand .nav a {
    font-size: 14px;
    margin-left: 30px;
}

/* contenter
-----------------------------------------------*/
.contenter .yu-banner {
    margin-bottom: 20px;
}
.contenter .yu-banner img {
    display: block;
    width: 1188px;
    border-radius: 3px;
    border: 6px solid #fff;
}
.contenter .yu-header {
    padding: 20px 0;
}
.contenter .yu-title {
    float: left;
    font-size: 24px;
    line-height: 40px;
}
.contenter .yu-auth {
    position: relative;
    float: left;
    margin-left: 10px;
    padding-left: 28px;
    line-height: 40px;
    color: #8dbc00;
    font-size: 14px;
}
.contenter .yu-auth .icon-auth {
    position: absolute;
    left: 0;
    top: 8px;
    display: block;
    width: 22px;
    height: 24px;
    background: url(http://www.0411hd.com/templets/images/yujiale/icon-auth.png) no-repeat;
}
.contenter .yu-description {
    color: #777;
    font-size: 14px;
}

.yu-main {
    float: left;
    width: 930px;
}
.yu-main .slide {
    float: left;
    width: 500px;
    height: 370px;
}
.yu-main .slide .slide-content {
    width: 488px;
    height: 288px;
    background: #fff;
    padding: 6px;
    margin-bottom: 10px;
    border-radius: 3px;
}
.yu-main .slide .slide-content img {
    display: block;
    width: 488px;
    height: 288px;
}
.yu-main .slide .slide-thumbnails ul {
    margin-right: -10px;
}
.yu-main .slide .slide-thumbnails li {
    float: left;
    width: 86px;
    height: 54px;
    border: 3px solid #fff;
    margin-right: 10px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.yu-main .slide .slide-thumbnails li.active {
    border-color: #4fbce4;
}
.yu-main .slide .slide-thumbnails li img {
    display: block;
    width: 80px;
    height: 48px;
    border: 3px solid #fff;
}
.yu-main .info {
    position: relative;
    margin-left: 520px;
    width: 410px;
    height: 370px;
}
.yu-main .info-wrapper {
    height: 150px;
    background: rgba(255, 255, 255, 0.9);
    background: #fff\9;
    border-radius: 3px;
}
.yu-main .info .icon-integrity {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 232px;
    height: 30px;
    text-indent: -9999em;
    background-image: url(http://www.0411hd.com/templets/images/yujiale/icon-integrity-v2.png);
    background-repeat: no-repeat;
}
.yu-main .info .icon-integrity.year-1 {
    background-position: 0 0;
}
.yu-main .info .icon-integrity.year-2 {
    background-position: 0 -40px;
}
.yu-main .info .icon-integrity.year-3 {
    background-position: 0 -80px;
}
.yu-main .info .icon-integrity.year-4 {
    background-position: 0 -120px;
}
.yu-main .info .icon-integrity.year-5 {
    background-position: 0 -160px;
}
.yu-main .info .icon-integrity.year-6 {
    background-position: 0 -200px;
}
.yu-main .info .icon-integrity.year-7 {
    background-position: 0 -240px;
}
.yu-main .info .icon-integrity.year-8 {
    background-position: 0 -280px;
}
.yu-main .info .icon-integrity.year-9 {
    background-position: 0 -320px;
}
.yu-main .info .icon-integrity.year-10 {
  background-position: -240px 0;
}
.yu-main .info .icon-integrity.year-11 {
  background-position: -240px -30px;
}
.yu-main .info .icon-integrity.year-12 {
  background-position: -240px -60px;
}
.yu-main .info .icon-integrity.year-13 {
  background-position: -240px -90px;
}
.yu-main .info .icon-integrity.year-14 {
  background-position: -240px -120px;
}
.yu-main .info .icon-integrity.year-15 {
  background-position: -240px -150px;
}
.yu-main .info .icon-integrity.year-16 {
  background-position: -240px -180px;
}
.yu-main .info .icon-integrity.year-17 {
  background-position: -240px -210px;
}
.yu-main .info .icon-integrity.year-18 {
  background-position: -240px --240px;
}
.yu-main .info .icon-integrity.year-19 {
  background-position: -240px -270px;
}
.yu-main .info .icon-integrity.year-20 {
  background-position: -240px -300px;
}
.yu-main .info .icon-integrity.year-21 {
  background-position: -240px -330px;
}
.yu-main .info .icon-integrity.year-22 {
  background-position: -240px -360px;
}
.yu-main .info .icon-integrity.year-23 {
  background-position: -240px -390px;
}
.yu-main .info .icon-integrity.year-24 {
  background-position: -240px -420px;
}
.yu-main .info .icon-integrity.year-25 {
  background-position: -240px -450px;
}
.yu-main .info .icon-integrity.year-26 {
  background-position: -240px -480px;
}
.yu-main .info .icon-integrity.year-27 {
  background-position: -240px -510px;
}
.yu-main .info .icon-integrity.year-28 {
  background-position: -240px -540px;
}
.yu-main .info .icon-integrity.year-29 {
  background-position: -240px -570px;
}
.yu-main .info .icon-integrity.year-30 {
  background-position: -240px -600px;
}

.yu-main .info .pageview {
    position: absolute;
    right: 20px;
    top: 20px;
    line-height: 30px;
    font-size: 14px;
}
.yu-main .info .attributes {
    padding: 70px 20px 20px 20px;
}
.yu-main .info .attributes li {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
}
.yu-main .info .card {
    position: absolute;
    bottom: 0;
    width: 410px;
    height: 200px;
    background: rgba(255, 255, 255, 0.9);
    background: #fff\9;
    border-radius: 3px;
}
.yu-main .info .card .weixin {
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100px;
    height: 130px;
}
.yu-main .info .card .weixin-image {
    width: 100px;
    height: 100px;
}
.yu-main .info .card .weixin-image img {
    display: block;
    width: 100px;
    height: 100px;
}
.yu-main .info .card .weixin-text {
    height: 30px;
    line-height: 30px;
    text-align: center;
}
.yu-main .info .card .title {
    position: absolute;
    left: 140px;
    top: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
}
.yu-main .info .card .contact {
    position: absolute;
    left: 140px;
    top: 60px;
}
.yu-main .info .card .contact li {
    padding-left: 26px;
    background-image: url(http://www.0411hd.com/templets/images/yujiale/icon-contact.png);
    background-repeat: no-repeat;
    width: 230px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
}
.yu-main .info .card .contact .user {
    background-position: 0 2px;
}
.yu-main .info .card .contact .mobile {
    background-position: 0 -35px;
}
.yu-main .info .card .contact .map {
    background-position: 0 -74px;
    height: 48px;
}
.yu-main .info .card .tips {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-top: 1px solid rgba(141, 188, 0, 0.5);
    border-top: 1px solid #8dbc00\9;
    text-align: center;
    font-size: 12px;
}
.yu-main .info .card .tips a {
    color: #8dbc00;
}

.yu-intro {
    margin-top: 30px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
    background: #fff\9;
}
.yu-intro table,
.yu-intro table td {
    border:1px solid #26b0e7;
    border-collapse:collapse;
}
.yu-intro table td {
    padding: 5px;
}
.yu-intro .tabs {
    border-bottom: 2px solid #26b0e7;
}
.yu-intro .tabs li {
    float: left;
    height: 38px;
    line-height: 38px;
    margin: 0 20px;
    font-size: 18px;
    cursor: pointer;
}
.yu-intro .tabs li:hover {
    color: #26b0e7;
}
.yu-intro .tabs li.active {
    background: #26b0e7;
    color: #fff;
    padding: 0 20px;
    margin: 0 20px 0 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.yu-intro .content {
    padding: 20px;
    line-height: 2;
    font-size: 14px;
}
.yu-intro .content h1 {
    font-weight: bold;
    font-size: 20px;
}
.yu-intro .content h2 {
    font-weight: bold;
    font-size: 18px;
}
.yu-intro .content h3 {
    font-weight: bold;
    font-size: 16px;
}
.yu-intro .content img {
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.yu-intro .content img:hover {
    border-color: #8dbc00;
}
.yu-intro .content .title {
    margin: 10px 0;
    font-weight: bold;
    font-size: 18px;
    color: #26b0e7;
    border-bottom: 1px solid #26b0e7;
}
.yu-intro .content .video {
    height: 550px;
}

.yu-video {
	padding: 20px;
	margin-top: 30px;
    height: 500px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.9);
}
.yu-video .video-js {
	width: 890px;
	height: 500px;
}

/* sidebar
-----------------------------------------------*/
.yu-sidebar {
    margin-left: 950px;
    width: 250px;
}
.yu-sidebar .sidebar-block {
    margin-bottom: 15px;
    padding: 10px 15px 15px;
    border-top: 2px solid #26b0e7;
    background: rgba(255, 255, 255, 0.9);
    background: #fff\9;
}
.yu-sidebar .sidebar-block .title {
    margin-bottom: 10px;
    font-size: 18px;

}
.yu-sidebar .sidebar-block .content {

}

.yu-sidebar .title-list {

}
.yu-sidebar .title-list li {
    height: 24px;
    line-height: 24px;
    overflow: hidden;
}
.yu-sidebar .image-title-skin1 .item {
    overflow: hidden;
    margin-bottom: 10px;
}
.yu-sidebar .image-title-skin1 .item:last-child {
    margin-bottom: 0;
}
.yu-sidebar .image-title-skin1 img {
    display: block;
    float: left;
    width: 75px;
    height: 60px;
}
.yu-sidebar .image-title-skin1 span {
    display: block;
    width: 135px;
    height: 48px;
    margin: 6px 0;
    line-height: 24px;
    margin-left: 85px;
    overflow: hidden;
}

.yu-sidebar .image-title-skin2 .item {
    overflow: hidden;
    margin-bottom: 10px;
}
.yu-sidebar .image-title-skin2 .item:last-child {
    margin-bottom: 0;
}
.yu-sidebar .image-title-skin2 img {
    display: block;
    width: 220px;
    height: 120px;
    margin-bottom: 5px;
}
.yu-sidebar .image-title-skin2 span {
    display: block;
    width: 220px;
    line-height: 20px;
    text-align: center;
    overflow: hidden;
}

/* preview
-----------------------------------------------*/
.image-preview {
    display: none;
}
.image-preview .image-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 100%;
}
.image-preview .image-wrapper .content {
    position: fixed;
    top: 10%;
    bottom: 10%;
    z-index: 9999;
    width: 100%;
    cursor: pointer;
}
.image-preview .image-wrapper .content img {
    height: 100%;
    vertical-align: middle;
    display: block;
    margin: 0 auto;
}
.image-preview .image-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 9997;
    background: #000;
    opacity: .7;
    filter: alpha(opacity=70);
}
.image-preview .prev {
    position: fixed;
    left: 5%;
    top: 50%;
    z-index: 9999;
    margin-top: -23px;
    width: 47px;
    height: 88px;
    background: url(http://www.0411hd.com/templets/images/yujiale/icons.png) no-repeat 0 0;
    cursor: pointer;
}
.image-preview .prev:hover {
    background-position: -47px 0;
}
.image-preview .next {
    position: fixed;
    right: 5%;
    top: 50%;
    z-index: 9999;
    margin-top: -23px;
    width: 47px;
    height: 88px;
    background: url(http://www.0411hd.com/templets/images/yujiale/icons.png) no-repeat -114px 0;
    cursor: pointer;
}
.image-preview .next:hover {
    background-position: -161px 0;
}
.image-preview .close {
    position: fixed;
    right: 5%;
    top: 5%;
    z-index: 9999;
    width: 40px;
    height: 40px;
    display: block;
    background: url(http://www.0411hd.com/templets/images/yujiale/icons.png) 0 -108px no-repeat;
    cursor: pointer;
}
.image-preview .close:hover {
    background-position: -60px -108px;
}

/* footer
-----------------------------------------------*/
.footer {
    margin-top: 30px;
    padding: 20px 0;
    border-top: 3px solid #26b0e7;
    background: rgba(255, 255, 255, 0.9);
    background: #fff\9;
}
.footer .copyright .links a {
    padding: 0 8px;
}
.footer .copyright .item {
    text-align: center;
    line-height: 28px;
}
.footer .friendlink {
    margin-top: 20px;
    color: #999;
}
.footer .friendlink a {
    padding: 0 5px;
    color: #666;
}
.footer .friendlink a:hover {
    color: #000;
}

#pop_ad {
    display: none;
}