@import "bootstrap.css";
@import "fkpagetransitions.min.css";
@import "base.css";

html, body{ width: 100%; height: 100%; overflow: hidden; }

body, div.left-menu{
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
body.fixed{ padding-left: 200px; position: relative; }

@media (max-width: 980px) {
    body.fixed{ padding-left: 0; }
}

/*left-menu*/
div.left-menu{ width: 200px; height: 100%; background-color: #FFF; position: absolute; top: 0; left: -200px; z-index: 9999; }
div.left-menu a.logo-wrap{ width: 100%; display: block; }
div.left-menu a.logo-wrap img{ width: 100%; }
body.fixed div.left-menu{ left: 0; }

@media (max-width: 980px) {
    body.fixed div.left-menu{ box-shadow: 0 0 10px rgba(0, 0, 0, .2); }
}

/*navigation*/
div.navigation{ width: 100%; padding: 30px 0; }
div.navigation ul.list{ width: 100%; }
div.navigation ul.list li{ width: 100%; font-size: 16px; padding: 6px 0; text-align: center; }
div.navigation ul.list li a{ color: #333; }
div.navigation ul.list li a:hover, div.navigation ul.list li a:focus{ text-decoration: none; }
div.navigation ul.list li.active a{ color: #999; }

/*container-wrap*/
div.container-wrap{ width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; text-align: center; }
/*div.container-wrap .contain{ width: 100%; height: 100%; padding: 80px 50px; }*/
div.container-wrap .contain{ display: inline-block; width: 1200px; padding: 150px 50px 0; text-align: left; }
/*div.container-wrap .contain:after{ display: block; content: ''; clear: both; }*/

@media (max-width: 1200px) {
    div.container-wrap .contain{ width: 100%; height: 100%; display: block; overflow-y: auto; }
}

@media (max-width: 980px) {
    div.container-wrap .contain{ padding: 80px 30px 50px; overflow-y: auto; }
}

/*text-wrap*/
div.container-wrap .text-wrap{ width: 670px; height: 390px; padding: 60px 0 0 0; position: relative; vertical-align: top; display: inline-block; }
div.container-wrap .text-wrap .title{ padding-bottom: 40px; position: absolute; top: 0; left: 0; z-index: 1; }
div.container-wrap .text-wrap .title:after{ display: block; content: ''; clear: both; }
div.container-wrap .text-wrap .title h2{ font-size: 20px; line-height: 20px; border-left: 2px solid #333; padding: 0 15px; display: inline-block; vertical-align: bottom; }
div.container-wrap .text-wrap .title ul.list{ display: inline-block; vertical-align: bottom; position: relative; bottom: -10px; }
div.container-wrap .text-wrap .title ul.list li{ font-size: 14px; line-height: 14px; padding: 0 10px; float: left; }
div.container-wrap .text-wrap .title ul.list li a{ display: inline-block; color: #666; padding: 8px 0; border-bottom: 2px solid #FFF; }
div.container-wrap .text-wrap .title ul.list li a:hover, div.container-wrap .text-wrap .title ul.list li a:focus{ text-decoration: none; }
div.container-wrap .text-wrap .title ul.list li a:hover{ color: #333; }
div.container-wrap .text-wrap .title ul.list li.active a{ border-bottom-color: #CCC; }

div.container-wrap .text-wrap .content{ width: 100%; height: 100%; overflow: hidden; padding-right: 25px; font-size: 14px; line-height: 28px; color: #888888; }
div.container-wrap .text-wrap .content:after{ display: block; content: ''; clear: both; }

@media (max-width: 1200px) {
    div.container-wrap .text-wrap{ width: 50%; float: left; }
}

@media (max-width: 980px) {
    div.container-wrap .text-wrap{ width: 100%; height: auto; float: none; padding-left: 0; }
    div.container-wrap .text-wrap .content{ height: auto; overflow: visible; padding: 0; }
}

/*项目*/
div.container-wrap .project-item{ width: 46%; padding-bottom: 45px; float: left; }
div.container-wrap .project-item:nth-child(2n){ margin-left: 8%; }
div.container-wrap .project-item dt{ font-size: 16px; font-weight: normal; padding-bottom: 15px; }
div.container-wrap .project-item dd{}
div.container-wrap .project-item dd p{ line-height: 32px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }
div.container-wrap .project-item dd p a{ font-size: 14px; color: #666; }
div.container-wrap .project-item dd p a:hover, div.container-wrap .project-item dd p a:focus{ text-decoration: none; }
div.container-wrap .project-item dd p a:hover{ color: #333; }

/*媒体*/
div.container-wrap .media-item{ display: block; color: #333; padding-bottom: 15px; }
div.container-wrap .media-item:hover, div.container-wrap .media-item:focus{ text-decoration: none; }
div.container-wrap .media-item p.time{ font-size: 12px; color: #999; }
div.container-wrap .media-item h3{ font-size: 18px; color: #333; margin: 0 0 8px; }
div.container-wrap .media-item p.desc{ font-size: 14px; color: #666; line-height: 24px; }

/*项目 详情*/
div.container-wrap .detail-wrap{ position: relative; z-index: 1; }
div.container-wrap .detail-wrap .item{ background: no-repeat left top; background-size: cover; }

#dots{ width: 100%; text-align: center; position: fixed; left: 0; bottom: 30px; z-index: 999; }
#dots span{ display: inline-block; width: 12px; height: 12px; border: 1px solid #FFF; margin: 0 5px; cursor: pointer;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
#dots span.active{ background-color: #FFF; }

div.btn-box{ }
div.btn-box .btns{ width: 42px; height: 80px; margin-top: -40px; cursor: pointer; background: rgba(0, 0, 0, .3) no-repeat center center; position: fixed; top: 50%; z-index: 999; }
div.btn-box .btns.btn-left{ left: 30px; background-image: url("../images/br_left.png"); }
div.btn-box .btns.btn-right{ right: 30px; background-image: url("../images/br_right.png"); }
div.btn-box .btns:hover{ background-color: rgba(0, 0, 0, .5); }

div.btn-box.all .btns{ width: 50%; height: 100%; top: 0; background: transparent; margin-top: 0;  cursor: default; }
div.btn-box.all .btns span{ display: none; }
div.btn-box.all .btns.btn-left{ left: 0; cursor: url("../images/br_left.png"), auto; }
div.btn-box.all .btns.btn-right{ right: 0; cursor: url("../images/br_right.png"), auto; }
div.btn-box .btns:hover{ background-color: transparent; }

div.show-number{ font-size: 16px; color: #DCDCDC; padding: 5px 15px; border-radius: 5px; background: rgba(0, 0, 0, .5); position: fixed; right: 50px; bottom: 50px; z-index: 999;}

@media (max-width: 980px) {
    div.btn-box.all .btns{ display: none; }
    div.btn-box.all .btns span{ display: none; content: ''; width: 42px; height: 80px; cursor: pointer; background: transparent no-repeat center center; position: absolute; top: 50%; margin-top: -40px; }
    div.btn-box.all .btns.btn-left span{ left: 30px; background-image: url("../images/br_left.png"); }
    div.btn-box.all .btns.btn-right span{ right: 30px; background-image: url("../images/br_right.png");  }
    div.btn-box.all .btns:hover span{ display: block; }

    div.show-number{ right: 20px; bottom: 20px; }
}

/*btn-back*/
.btn-back{ display: block; font-size: 20px; font-weight:bolder; color: #666; position: fixed; top: 26px; left: 80px; z-index: 1000; }
.btn-back a{ color: #666; }
.btn-back a:hover{ text-decoration: none; }

/*drag-wrap*/
div.container-wrap .drag-wrap{ width: 100%; height: 100%; padding: 30px; position: absolute; top: 0; left: 0; z-index: 10; }
div.container-wrap .drag-wrap:after{ display: block; content: ''; clear: both; }
div.container-wrap .drag-wrap .drag-box{ width: 300px; background-color: rgba(255, 255, 255, .5); box-shadow: 0 0 15px rgba(0, 0, 0, .2); padding: 10px; float: left; margin: 15px; }
div.container-wrap .drag-wrap .drag-box .title{ padding-bottom: 10px; padding-right: 30px; position: relative; }
div.container-wrap .drag-wrap .drag-box .title h3{ font-size: 16px; }
div.container-wrap .drag-wrap .drag-box .title a.btn-close{ display: block; width: 10px; height: 10px; background: url("../images/close.png") no-repeat left 0; background-size: 100%; position: absolute; top: 5px; right: 5px; }
div.container-wrap .drag-wrap .drag-box .title a.btn-close:hover{ background-position: 0 -10px; }

div.container-wrap .drag-wrap .drag-box .content{}
div.container-wrap .drag-wrap .drag-box .content img{ max-width: 100%; }


/*thumb-wrap*/
div.container-wrap .thumb-wrap{ width: 420px; height: 390px; overflow: hidden; padding: 60px 0 0 25px; vertical-align: top; display: inline-block; }
div.container-wrap .thumb-wrap img{ max-width: 100% !important; }

@media (max-width: 1200px) {
    div.container-wrap .thumb-wrap{ width: 50%; float: left; }
}

@media (max-width: 980px) {
    div.container-wrap .thumb-wrap{ width: 100%; float: none; padding-left: 0; }
}

/*menu-wrap*/
div.menu-wrap{ display: block; width: 36px; height: 36px; border: 1px solid #666; position: absolute; top: 20px; left: 20px; z-index: 9999; cursor: pointer; background-color:#FFF;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
div.menu-wrap span{ display: block; width: 24px; height: 3px; background-color: #666; position: absolute; left: 50%; margin-left: -12px; top: 50%; margin-top: -1.5px; }
div.menu-wrap span:before, div.menu-wrap span:after{ display: block; content: ''; width: 100%; height: 3px; background-color: #666; position: absolute; left: 0; }
div.menu-wrap span:before{ top: -6px; }
div.menu-wrap span:after{ bottom: -6px; }
div.menu-wrap span, div.menu-wrap span:before, div.menu-wrap span:after{
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

body.fixed div.menu-wrap{ left: 210px; display: none; }
body.fixed div.menu-wrap span{ background-color: transparent; }
body.fixed div.menu-wrap span:before{
    -webkit-transform: rotate(45deg) translate(4px, 4.5px);
    -moz-transform: rotate(45deg) translate(4px, 4.5px);
    -ms-transform: rotate(45deg) translate(4px, 4.5px);
    -o-transform: rotate(45deg) translate(4px, 4.5px);
    transform: rotate(45deg) translate(4px, 4.5px);
}
body.fixed div.menu-wrap span:after{
    -webkit-transform: rotate(-45deg) translate(4px, -4px);
    -moz-transform: rotate(-45deg) translate(4px, -4px);
    -ms-transform: rotate(-45deg) translate(4px, -4px);
    -o-transform: rotate(-45deg) translate(4px, -4px);
    transform: rotate(-45deg) translate(4px, -4px);
}


/*welcome-wrapper*/
div.welcome-wrapper{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
div.welcome-wrapper .index-info{ text-align: justify; position: relative; top: -20px; }
div.welcome-wrapper .index-info:after{ display: block; content: ''; clear: both; }
div.welcome-wrapper .index-info h2{ font-size: 24px; color: #020202; }
div.welcome-wrapper .index-info p{ font-size: 14px; }

/*left*/
div.welcome-wrapper .index-info .left{ float: left; }
div.welcome-wrapper .index-info .left h2{ letter-spacing: 1px; }
div.welcome-wrapper .index-info .left p{ letter-spacing: 6px; }

/*right*/
div.welcome-wrapper .index-info .right{ padding-left: 50px; float: right; position: relative; }
div.welcome-wrapper .index-info .right h2{ letter-spacing: 22px; }
div.welcome-wrapper .index-info .right p{ }
div.welcome-wrapper .index-info .right:before{ display: block; content: ''; width: 1px; height: 50px; background-color: #999; position: absolute; left: 20px; top: 50%; margin-top: -25px; }

@media (max-width: 560px) {
    div.welcome-wrapper .index-info .left{ float: none; }
    div.welcome-wrapper .index-info .right{ float: none; padding-top: 20px; }
    div.welcome-wrapper .index-info .right:before{ display: none; }
}