|
|
| (26 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | /* General Slides */
| |
| | | | |
| − | /*************************************************
| |
| − | right text frame container
| |
| − | ***********************************************/
| |
| − | #RightContent {
| |
| − | float: right;
| |
| − | position: fixed;
| |
| − | left: 260px;
| |
| − | top: 0px;
| |
| − | right: 0;
| |
| − | height:100%;
| |
| − | overflow-y: scroll;
| |
| − | transition: all 200ms ease-out;
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | z-index:5;
| |
| − |
| |
| − | }
| |
| − | .transparent_class {
| |
| − | border-radius: 0px;
| |
| − | position: absolute;
| |
| − | top: 350px;
| |
| − | left: 50px;
| |
| − | right: 50px;
| |
| − | background-color: #0072E3;
| |
| − | color:#000000;
| |
| − | filter:alpha(opacity=80);
| |
| − | -moz-opacity:0.8;
| |
| − | -khtml-opacity: 0.8;
| |
| − | opacity: 0.8;
| |
| − | }
| |
| − | .blockWords{
| |
| − | font-family:Arial, Helvetica, sans-serif;
| |
| − | font-size: 17px;
| |
| − | padding: 15px;
| |
| − | color: #ffffff;
| |
| − | }
| |
| − |
| |
| − | #HZpic {
| |
| − | background-position:0 0 !important;
| |
| − | width:100%;
| |
| − | padding:10px 40px 20px 40px;
| |
| − | margin-top:20px;
| |
| − | }
| |
| − | #content{
| |
| − | height:90px;
| |
| − | padding: 0px 0px 0px 0px;
| |
| − | border-left: 0px solid #444444;
| |
| − | border-right: 0px solid #444444;
| |
| − | background:none;
| |
| − | }
| |
| − | /*************************************************
| |
| − | right text frame container
| |
| − | ***********************************************/
| |
| − | #title {
| |
| − | position: fixed;
| |
| − | font-size: 80px;
| |
| − | left:260px;
| |
| − | z-index: 5;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #firstTitle {
| |
| − | font-family: Arial, Helvetica, sans-serif;
| |
| − | position: fixed;
| |
| − | width:1000px;
| |
| − | margin-top:0;
| |
| − | margin-bottom:0;
| |
| − | top: 60px;
| |
| − | font-size: 80px;
| |
| − | color: #FFFFAA;
| |
| − | overflow: hidden;
| |
| − |
| |
| − | }
| |
| − | #firstTitle p {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | .transparent_class {
| |
| − | border-radius: 0px;
| |
| − | position: absolute;
| |
| − | top: 350px;
| |
| − | width:1000px;
| |
| − | left: 50px;
| |
| − | right: 50px;
| |
| − | background-color: #0072E3;
| |
| − | color:#000000;
| |
| − | filter:alpha(opacity=80);
| |
| − | -moz-opacity:0.8;
| |
| − | -khtml-opacity: 0.8;
| |
| − | opacity: 0.8;
| |
| − | }
| |
| − |
| |
| − | #RightContentText {
| |
| − | position: absolute;
| |
| − | top: 510px;
| |
| − | width: 1040px;
| |
| − | left:28px;
| |
| − | right:8px;
| |
| − | background:#FFFFFF;
| |
| − | color: #000000;
| |
| − | transition: all 200ms ease-out;
| |
| − | transform: translate3d(0, 0, 0);
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .slide{
| |
| − | background-attachment: fixed;
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | position: relative;
| |
| − | padding:0 10px 0 10px;
| |
| − | margin: 0 10px 0 10px;
| |
| − | z-index:12;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | h2 {
| |
| − | display:block;
| |
| − | margin:0 0 23px;
| |
| − | padding:0;
| |
| − | text-transform:none;
| |
| − | text-align:left;
| |
| − | font-style:normal;
| |
| − | border-bottom:1px solid #e0e0e0;
| |
| − | font-family: Helvetica ;
| |
| − | font-size: 40px;
| |
| − | line-height: 82px;
| |
| − | color:#343434;
| |
| − | font-weight: 300;
| |
| − | }
| |
| − |
| |
| − | h3 {
| |
| − | margin:0;
| |
| − | padding:40px 0 32px 0;
| |
| − | text-align:center;
| |
| − | font-family: Helvetica ;
| |
| − | font-weight:800;
| |
| − | font-size:32px;
| |
| − | font-style:normal;
| |
| − | line-height:36px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | h4 {
| |
| − | margin:0;
| |
| − | padding:0 0 15px;
| |
| − | text-transform:none;
| |
| − | text-align:left;
| |
| − | font-family: Helvetica ;
| |
| − | font-weight:300;
| |
| − | font-size:32px;
| |
| − | font-style:normal;
| |
| − | line-height:36px;
| |
| − | color:#222;
| |
| − | }
| |
| − |
| |
| − | img.icon_img {
| |
| − | float:left;
| |
| − | margin-right:20px;
| |
| − | margin-top:20px;
| |
| − | margin-bottom:25px;
| |
| − | }
| |
| − |
| |
| − | .effect_2 {
| |
| − | background:url(../images/effect_2.png) repeat left top;
| |
| − | position:relative;
| |
| − | top:0;
| |
| − | bottom:-57px;
| |
| − | height:100%;
| |
| − | z-index:999 !important;
| |
| − | }
| |
| − |
| |
| − | /*________________________judging__________________*/
| |
| − | #bronze h3{
| |
| − | background-image: url();
| |
| − | background-repeat: no-repeat;
| |
| − | text-decoration:underline;
| |
| − | color: #e8b77c;
| |
| − | }
| |
| − | #silver h3{
| |
| − | background-image: url();
| |
| − | background-repeat: no-repeat;
| |
| − | text-decoration:underline;
| |
| − | color: #b4c8cb;
| |
| − | }
| |
| − | #gold h3{
| |
| − | background-image: url();
| |
| − | background-repeat: no-repeat;
| |
| − | text-decoration:underline;
| |
| − | color: #fbca23;
| |
| − | }
| |
| − |
| |
| − | .req_list{
| |
| − | width: 90%;
| |
| − | }
| |
| − | .req_list h1{
| |
| − | background:url(https://static.igem.org/mediawiki/2015/4/4e/CHINA_CD_UESTC_YesIcon.png) no-repeat;
| |
| − | background-size: 6%;
| |
| − | margin:0;
| |
| − | padding:10px 0 0px 50px;
| |
| − | margin-left: 50px;
| |
| − | font-family: Helvetica ;
| |
| − | font-weight:800;
| |
| − | font-size:20px;
| |
| − | font-style:normal;
| |
| − | line-height:36px;
| |
| − | }
| |
| − | .req_list p{
| |
| − | margin:0;
| |
| − | margin-left: 120px;
| |
| − | font-family: 'Microsoft Yahei' ;
| |
| − | font-weight:500;
| |
| − | font-size:15px;
| |
| − | font-style:normal;
| |
| − | line-height:26px;
| |
| − | }
| |
| − | /* ____________________________________ Slide 2 标准文本____________________________________ */
| |
| − |
| |
| − | #slide2 {
| |
| − | width:100%;
| |
| − | padding:20px 0 20px;
| |
| − | }
| |
| − |
| |
| − | .det_inf {margin-bottom:24px;
| |
| − | }
| |
| − | .det_inf li {margin-bottom:10px;
| |
| − | }
| |
| − | .det_inf li a {
| |
| − | color:#929292;
| |
| − | }
| |
| − | .det_inf li a:hover {
| |
| − | color:#f14833;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ___________________________________ //Slide 2 ___________________________________ */
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ____________________________________ Slide 4 service旋转四列____________________________________ */
| |
| − |
| |
| − | #slide4 {
| |
| − | width:100%;
| |
| − | padding:86px 0 69px;
| |
| − | }
| |
| − | #slide4 h2 {
| |
| − | color:#b8b8b8;
| |
| − | border-bottom:1px solid #3b3b3b;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ____________ SERVICES_BLOCK ___________ */
| |
| − | a.servc_block {
| |
| − | display:block;
| |
| − | position:relative;
| |
| − | text-align:center;
| |
| − | color:#6f6f6f;
| |
| − | }
| |
| − |
| |
| − | .icon_bord {
| |
| − | position:relative;
| |
| − | z-index:10;
| |
| − | top:0;
| |
| − | left:50%;
| |
| − | margin-left:-51px;
| |
| − | width:102px;
| |
| − | height:116px;
| |
| − | }
| |
| − |
| |
| − | .icon1, .icon1_h {
| |
| − | position:absolute;
| |
| − | z-index:1;
| |
| − | top:0;
| |
| − | left:0;
| |
| − | }
| |
| − |
| |
| − | .servc_block .icon1 {
| |
| − | transition: all 0.5s ease-out;
| |
| − | opacity: 1;
| |
| − | }
| |
| − | .servc_block:hover .icon1 {
| |
| − | transform: rotate(720deg) scale(0);
| |
| − | opacity: 0;
| |
| − | }
| |
| − |
| |
| − | .servc_block .icon1_h {
| |
| − | transition: all 0.5s ease-out;
| |
| − | transform: rotate(720deg) scale(0);
| |
| − | opacity: 0;
| |
| − | }
| |
| − | .servc_block:hover .icon1_h {
| |
| − | transform: rotate(720deg) scale(1);
| |
| − | opacity: 1;
| |
| − | transition-delay: 0.4s;
| |
| − | }
| |
| − |
| |
| − | .servc_block p {
| |
| − | font-family: Helvetica ;
| |
| − | font-weight:300;
| |
| − | font-size:20px;
| |
| − | line-height:22px;
| |
| − | color:#a3a3a3;
| |
| − | transition: all 0.2s ease-in-out;
| |
| − | -moz-transition: all 0.2s ease-in-out;
| |
| − | -webkit-transition: all 0.2s ease-in-out;
| |
| − | -o-transition: all 0.2s ease-in-out;
| |
| − | }
| |
| − | .servc_block:hover p {
| |
| − | color:#f14833;
| |
| − | transition-delay: 0.7s;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ____________ SERVICES_BLOCK ___________ */
| |
| − |
| |
| − | /* ___________________________________ //Slide 4 ___________________________________ */
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ____________________________________ Slide 6 时间轴____________________________________ */
| |
| − |
| |
| − | #slide6 {
| |
| − | background:url(../images/slide6_bg.jpg) repeat left top;
| |
| − | width:100%;
| |
| − | padding:30px 0 30px;
| |
| − | }
| |
| − |
| |
| − | #slide6 h2 {color:#222;
| |
| − | }
| |
| − |
| |
| − | /* ____________________ exhib_block ____________________ */
| |
| − | .exhib_block {position:relative;}
| |
| − | .exhib_block .fleft {margin-left:1px;}
| |
| − | .exhib_line_center {
| |
| − | position:absolute;
| |
| − | left:50%;
| |
| − | top:12px;
| |
| − | width:1px;
| |
| − | height:83%;
| |
| − | background:#c3c3c3;
| |
| − | }
| |
| − | .exhib_block p {
| |
| − | padding-bottom:9px;
| |
| − | font-family: Helvetica ;
| |
| − | font-weight:400;
| |
| − | font-size:20px;
| |
| − | color:#343434;
| |
| − | transition: all 0.2s ease-in-out;
| |
| − | -moz-transition: all 0.2s ease-in-out;
| |
| − | -webkit-transition: all 0.2s ease-in-out;
| |
| − | -o-transition: all 0.2s ease-in-out;
| |
| − | }
| |
| − | .exhib_cont:hover p {color:#f14833;
| |
| − | }
| |
| − |
| |
| − | .exhib_p_top {margin-left:80px;
| |
| − | }
| |
| − |
| |
| − | .exhib_cont {
| |
| − | position:relative;
| |
| − | width:420px;
| |
| − | margin-top:30px;
| |
| − | padding:13px 20px 9px;
| |
| − | background:#fff;
| |
| − | color:#8d8d8d;
| |
| − | border:1px solid #dedede;
| |
| − | border-radius:12px;
| |
| − | transition: all 0.2s ease-in-out;
| |
| − | -moz-transition: all 0.2s ease-in-out;
| |
| − | -webkit-transition: all 0.2s ease-in-out;
| |
| − | -o-transition: all 0.2s ease-in-out;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .exhib_block .fright {
| |
| − | position: relative;
| |
| − | left:52%;
| |
| − | margin-top:50px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .exhib_cont:hover {
| |
| − | -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.15);
| |
| − | -moz-box-shadow: 0 0 16px rgba(0,0,0,0.15);
| |
| − | box-shadow: 0 0 16px rgba(0,0,0,0.15);
| |
| − | }
| |
| − |
| |
| − | .exhib_date_right, .exhib_date_left, .exhib_date_top {
| |
| − | display:block;
| |
| − | position:absolute;
| |
| − | font-family: Helvetica ;
| |
| − | font-weight:300;
| |
| − | font-size:26px;
| |
| − | line-height:20px;
| |
| − | color:#91B517;
| |
| − | transition: all 0.2s ease-in-out;
| |
| − | -moz-transition: all 0.2s ease-in-out;
| |
| − | -webkit-transition: all 0.2s ease-in-out;
| |
| − | -o-transition: all 0.2s ease-in-out;
| |
| − | }
| |
| − | .exhib_date_top {
| |
| − | left:49.5%;
| |
| − | top:0;
| |
| − | width:95px;
| |
| − | text-align:right;
| |
| − | }
| |
| − |
| |
| − | .exhib_date_left {
| |
| − | left:-150px;
| |
| − | top:27px;
| |
| − | }
| |
| − | .exhib_date_right {
| |
| − | right:-190px;
| |
| − | top:27px;
| |
| − | text-align:right;
| |
| − | }
| |
| − | .exhib_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:30px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ___________________ //exhib_block ___________________ */
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ___________________________________ //Slide 6 ___________________________________ */
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ____________________________________ Slide 12 左图右文____________________________________ */
| |
| − |
| |
| − | #slide12 {
| |
| − | background:url(..) repeat left top;
| |
| − | background-position:0 0 !important;
| |
| − | width:100%;
| |
| − | padding:10px 0 20px;
| |
| − | margin-top:20px;
| |
| − | }
| |
| − |
| |
| − | #slide12 h2 {color:#OOOOOO;
| |
| − | font-size:50px !important;
| |
| − | }
| |
| − |
| |
| − | #slide12 p {color:#888888;
| |
| − | }
| |
| − | #slide12 .foto {
| |
| − | float:left;
| |
| − | margin:0 20px 20px 0;
| |
| − | }
| |
| − |
| |
| − | #slide12 h5 {
| |
| − | margin:50px 0 0 0;
| |
| − | padding-bottom:8px;
| |
| − | text-transform:none;
| |
| − | font-family: Helvetica ;
| |
| − | font-size: 32px;
| |
| − | line-height: 31px;
| |
| − | font-weight: 300;
| |
| − | color:#acacac;
| |
| − | }
| |
| − | #slide12 h6 {
| |
| − | margin:0 0 0 0;
| |
| − | padding-bottom:2px;
| |
| − | text-transform:none;
| |
| − | font-family: Helvetica ;
| |
| − | font-size: 20px;
| |
| − | line-height: 23px;
| |
| − | font-weight: 300;
| |
| − | color:#acacac;
| |
| − | }
| |
| − | .client_foto {
| |
| − | float:left;
| |
| − | position:relative;
| |
| − | margin:0 5px 10px 0;
| |
| − | height:460px;
| |
| − | width:400px;
| |
| − | }
| |
| − | .client_foto img {
| |
| − | position:absolute;
| |
| − | left:0;
| |
| − | top:0;
| |
| − | z-index:10;
| |
| − | width: 90%;
| |
| − | }
| |
| − | .foto {z-index:5 !important;}
| |
| − |
| |
| − | .contact_det,
| |
| − | .contact_det a {
| |
| − | color:#888888;
| |
| − | line-height:26px;
| |
| − | }
| |
| − | .contact_det a:hover {color:#f14833;}
| |
| − |
| |
| − |
| |
| − |
| |
| − | /* ____________________________________ //Slide 12 ____________________________________ */
| |
| − |
| |
| − |
| |
| − | /*______________________________________gallery________________________________________*/
| |
| − | /***************gallery***/
| |
| − | @font-face {
| |
| − | font-family: 'BebasNeueRegular';
| |
| − | src: url('fonts/BebasNeue-webfont.eot');
| |
| − | src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
| |
| − | url('fonts/BebasNeue-webfont.woff') format('woff'),
| |
| − | url('fonts/BebasNeue-webfont.ttf') format('truetype'),
| |
| − | url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
| |
| − | font-weight: normal;
| |
| − | font-style: normal;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .clr{
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .cr-gallery{
| |
| − | width: 600px;
| |
| − | height: 400px;
| |
| − | position: relative;
| |
| − | margin: 0 auto;
| |
| − | overflow: hidden;
| |
| − | border: 20px solid #fff;
| |
| − | box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
| |
| − | }
| |
| − | .cr-gallery label{
| |
| − | font-style: italic;
| |
| − | width: 150px;
| |
| − | height: 30px;
| |
| − | cursor: pointer;
| |
| − | color: #fff;
| |
| − | line-height: 32px;
| |
| − | font-size: 24px;
| |
| − | float:left;
| |
| − | position: relative;
| |
| − | margin-top:350px;
| |
| − | z-index: 1000;
| |
| − | }
| |
| − | .cr-gallery label:before{
| |
| − | content:'';
| |
| − | width: 34px;
| |
| − | height: 34px;
| |
| − | background: rgba(130,195,217,0.9);
| |
| − | position: absolute;
| |
| − | left: 50%;
| |
| − | margin-left: -17px;
| |
| − | border-radius: 50%;
| |
| − | box-shadow: 0px 0px 0px 4px rgba(255,255,255,0.3);
| |
| − | z-index:-1;
| |
| − | }
| |
| − | .cr-gallery label:after{
| |
| − | width: 1px;
| |
| − | height: 400px;
| |
| − | content: '';
| |
| − | background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
| |
| − | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
| |
| − | background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| |
| − | background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| |
| − | background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| |
| − | background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
| |
| − | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
| |
| − | position: absolute;
| |
| − | bottom: -20px;
| |
| − | right: 0px;
| |
| − | }
| |
| − | .cr-gallery label.cr-label-img-4:after{
| |
| − | width: 0px;
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1,
| |
| − | .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2,
| |
| − | .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3,
| |
| − | .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{
| |
| − | color: #68abc2;
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before,
| |
| − | .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before,
| |
| − | .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before,
| |
| − | .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{
| |
| − | background: #fff;
| |
| − | box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6);
| |
| − | }
| |
| − | .cr-gallery input{
| |
| − | display: none;
| |
| − | }
| |
| − | .cr-bgimg{
| |
| − | width: 600px;
| |
| − | height: 400px;
| |
| − | position: absolute;
| |
| − | left: 0px;
| |
| − | top: 0px;
| |
| − | z-index: 1;
| |
| − | }
| |
| − | .cr-bgimg{
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: 0 0;
| |
| − | }
| |
| − | .cr-bgimg div{
| |
| − | width: 150px;
| |
| − | height: 100%;
| |
| − | position: relative;
| |
| − | float: left;
| |
| − | overflow: hidden;
| |
| − | background-repeat: no-repeat;
| |
| − | }
| |
| − | .cr-bgimg div span{
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | top: 0px;
| |
| − | left: 0px;
| |
| − | -webkit-transform: scale(1.5);
| |
| − | -moz-transform: scale(1.5);
| |
| − | -o-transform: scale(1.5);
| |
| − | -ms-transform: scale(1.5);
| |
| − | transform: scale(1.5);
| |
| − | opacity: 0;
| |
| − | z-index: 2;
| |
| − | text-indent: -9000px;
| |
| − | }
| |
| − |
| |
| − | .cr-bgimg div:nth-child(1) span{
| |
| − | background-position: 0px 0px;
| |
| − | }
| |
| − | .cr-bgimg div:nth-child(2) span{
| |
| − | background-position: -150px 0px;
| |
| − | }
| |
| − | .cr-bgimg div:nth-child(3) span{
| |
| − | background-position: -300px 0px;
| |
| − | }
| |
| − | .cr-bgimg div:nth-child(4) span{
| |
| − | background-position: -450px 0px;
| |
| − | }
| |
| − | .cr-gallery input:checked ~ .cr-bgimg div span{
| |
| − | -webkit-animation: scaleOut 0.6s ease-in-out;
| |
| − | -moz-animation: scaleOut 0.6s ease-in-out;
| |
| − | -o-animation: scaleOut 0.6s ease-in-out;
| |
| − | -ms-animation: scaleOut 0.6s ease-in-out;
| |
| − | animation: scaleOut 0.6s ease-in-out;
| |
| − | }
| |
| − | @-webkit-keyframes scaleOut{
| |
| − | 0%{ -webkit-transform: scale(1); opacity: 1; }
| |
| − | 100%{ -webkit-transform: scale(1.5); opacity: 0; }
| |
| − | }
| |
| − | @-moz-keyframes scaleOut{
| |
| − | 0%{ -moz-transform: scale(1); opacity: 1; }
| |
| − | 100%{ -moz-transform: scale(1.5); opacity: 0; }
| |
| − | }
| |
| − | @-o-keyframes scaleOut{
| |
| − | 0%{ -o-transform: scale(1); opacity: 1; }
| |
| − | 100%{ -o-transform: scale(1.5); opacity: 0; }
| |
| − | }
| |
| − | @-ms-keyframes scaleOut{
| |
| − | 0%{ -ms-transform: scale(1); opacity: 1; }
| |
| − | 100%{ -ms-transform: scale(1.5); opacity: 0; }
| |
| − | }
| |
| − | @keyframes scaleOut{
| |
| − | 0%{ transform: scale(1); opacity: 1; }
| |
| − | 100%{ transform: scale(1.5); opacity: 0; }
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1),
| |
| − | .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2),
| |
| − | .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3),
| |
| − | .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4)
| |
| − | {
| |
| − | -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| |
| − | -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| |
| − | -o-transition: -o-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| |
| − | -ms-transition: -ms-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| |
| − | transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s;
| |
| − | -webkit-animation: none;
| |
| − | -moz-animation: none;
| |
| − | -o-animation: none;
| |
| − | -ms-animation: none;
| |
| − | animation: none;
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1);
| |
| − | -moz-transform: scale(1);
| |
| − | -o-transform: scale(1);
| |
| − | -ms-transform: scale(1);
| |
| − | transform: scale(1);
| |
| − | z-index:10000;
| |
| − | }
| |
| − | .cr-titles h3{
| |
| − | color: #fff;
| |
| − | text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
| |
| − | }
| |
| − | .cr-titles h3 span{
| |
| − | z-index: 10000;
| |
| − | position: absolute;
| |
| − | width: 100%;
| |
| − | left: 0px;
| |
| − | text-align: center;
| |
| − | opacity: 0;
| |
| − | top: 50%;
| |
| − | }
| |
| − | .cr-titles h3 span:nth-child(1){
| |
| − | left: 0px;
| |
| − | font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
| |
| − | font-size: 70px;
| |
| − | letter-spacing: 7px;
| |
| − | color: transparent;
| |
| − | text-shadow: 0px 0px 10px #fff;
| |
| − | -webkit-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| |
| − | -moz-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| |
| − | -o-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| |
| − | -ms-transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| |
| − | transition: text-shadow 0.8s ease-in-out, opacity 0.8s ease-in-out;
| |
| − | }
| |
| − | .cr-titles h3 span:nth-child(2){
| |
| − | margin-top: 84px;
| |
| − | letter-spacing: 0px;
| |
| − | background: rgba(104,171,194,0.9);
| |
| − | font-size: 14px;
| |
| − | padding: 10px 0px;
| |
| − | font-style: italic;
| |
| − | font-family: Cambria, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
| |
| − | -webkit-transition: opacity 0.8s ease-in-out;
| |
| − | -moz-transition: opacity 0.8s ease-in-out;
| |
| − | -o-transition: opacity 0.8s ease-in-out;
| |
| − | -ms-transition: opacity 0.8s ease-in-out;
| |
| − | transition: opacity 0.8s ease-in-out;
| |
| − | }
| |
| − | .cr-gallery input:checked ~ .cr-titles h3 span{
| |
| − | opacity: 0;
| |
| − | text-shadow: 0px 0px 30px #fff;
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1),
| |
| − | .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1),
| |
| − | .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1),
| |
| − | .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){
| |
| − | opacity: 1;
| |
| − | text-shadow: 0px 0px 1px #fff;
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2),
| |
| − | .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2),
| |
| − | .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2),
| |
| − | .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){
| |
| − | opacity: 1;
| |
| − | }
| |
| − | /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */
| |
| − | @media screen and (max-width: 768px) {
| |
| − | .cr-gallery input{
| |
| − | display: inline;
| |
| − | width: 24%;
| |
| − | margin-top: 350px;
| |
| − | z-index: 1000;
| |
| − | position: relative;
| |
| − | }
| |
| − | .cr-gallery label{
| |
| − | display: none;
| |
| − | }
| |
| − | }
| |
| − | /*________________________________________gallery-end___________________________________________*/
| |
| − |
| |
| − |
| |
| − | /**************gallery******************/
| |
| − | .gallery-items {
| |
| − | width:970px;
| |
| − | height: 1000px;
| |
| − | margin:100px 0 0 70px;
| |
| − | position: relative;
| |
| − | left: -150px;
| |
| − | }
| |
| − | .gallery-items a {
| |
| − | display:inline-block;
| |
| − | height:150px;
| |
| − | position:relative;
| |
| − | width:230px;
| |
| − | margin-left: 10px;
| |
| − | margin-right: 10px;
| |
| − | margin-top: 10px;
| |
| − | }
| |
| − | .gallery-items a img {
| |
| − | cursor:pointer;
| |
| − | display:inline-block;
| |
| − | height:100%;
| |
| − | left:0px;
| |
| − | position:absolute;
| |
| − | top:0px;
| |
| − | width:100%;
| |
| − | z-index:0;
| |
| − | border: 10px solid #fff;
| |
| − | box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
| |
| − |
| |
| − |
| |
| − | -moz-user-select: none;
| |
| − | -khtml-user-select: none;
| |
| − | user-select: none;
| |
| − |
| |
| − | -moz-box-sizing:border-box;
| |
| − | -webkit-box-sizing:border-box;
| |
| − | box-sizing:border-box;
| |
| − |
| |
| − | -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -webkit-transition-duration:0.5s;
| |
| − | -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -moz-transition-duration:0.5s;
| |
| − | -o-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -o-transition-duration:0.5s;
| |
| − | transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | transition-duration:0.5s;
| |
| − | }
| |
| − | .gallery-items li:hover img{
| |
| − | border:15px solid #fff;
| |
| − | cursor:default;
| |
| − | height:190%;
| |
| − | position:absolute;
| |
| − | width:190%;
| |
| − | z-index:51;
| |
| − |
| |
| − | box-shadow:1px 1px 5px #888;
| |
| − | -moz-box-shadow:1px 1px 5px #888;
| |
| − | -webkit-box-shadow:1px 1px 5px #888;
| |
| − | -webkit-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -webkit-transition-duration:0.5s;
| |
| − | -moz-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -moz-transition-duration:0.5s;
| |
| − | -o-transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | -o-transition-duration:0.5s;
| |
| − | transition-property:width, height, top, bottom, left, right, z-index, border;
| |
| − | transition-duration:0.5s;
| |
| − | }
| |
| − |
| |
| − | /* custom focus rules */
| |
| − | .gallery-items li:hover:nth-child(3n+1) img{
| |
| − | left: -100px;
| |
| − | z-index: 50;
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(3n+2) img{
| |
| − | left:-200px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(3n+3) img{
| |
| − | left:-300px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(n) img{
| |
| − | top:-100px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(n+7) img{
| |
| − | top:-150px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − | .gallery-items li:hover:nth-child(n+10) img{
| |
| − | top:-295px;
| |
| − | z-index: 50;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | text-align: left;
| |
| − | }
| |
| − | /***********select-gallery*********/
| |
| − | .gallery-container{
| |
| − | width: 80%;
| |
| − | margin: 60px auto 30px 170px;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .gallery-container label {
| |
| − | width: 20%;
| |
| − | height: 30px;
| |
| − | padding: 10px;
| |
| − | cursor: pointer;
| |
| − | line-height: 33px;
| |
| − | font-size: 19px;
| |
| − |
| |
| − | color: rgba(255,255,255,1);
| |
| − | text-decoration: none;
| |
| − | background-color: rgba(219,87,5,1);
| |
| − | font-family: 'Yanone Kaffeesatz','Microsoft yahei';
| |
| − | display: block;
| |
| − | padding: 4px;
| |
| − | -webkit-border-radius: 8px;
| |
| − | -moz-border-radius: 8px;
| |
| − | border-radius: 8px;
| |
| − | -webkit-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
| |
| − | -moz-box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
| |
| − | box-shadow: 0px 9px 0px rgba(219,31,5,1), 0px 9px 25px rgba(0,0,0,.7);
| |
| − | text-align: center;
| |
| − |
| |
| − | -webkit-transition: all .3s ease;
| |
| − | -moz-transition: all .3s ease;
| |
| − | -ms-transition: all .3s ease;
| |
| − | -o-transition: all .3s ease;
| |
| − | transition: all .3s ease;
| |
| − |
| |
| − |
| |
| − | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 );
| |
| − | float: left;
| |
| − | }
| |
| − | .gallery-container label.gallery-label-type-all{
| |
| − | border-radius: 3px 0px 0px 3px;
| |
| − | }
| |
| − | .gallery-container label.gallery-label-type-3{
| |
| − | border-radius: 0px 3px 3px 0px;
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all,
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1,
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2,
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{
| |
| − | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 );
| |
| − |
| |
| − |
| |
| − |
| |
| − | -webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | background-color: rgba(255, 178, 29, 0.9);
| |
| − | color: rgb(255, 255, 255);}
| |
| − | .gallery-container input{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .gallery-items li{
| |
| − | margin: 0px;
| |
| − | float: left;
| |
| − | width: 300px;
| |
| − | height: 200px;
| |
| − | -webkit-transition: all 0.6s ease-in-out;
| |
| − | -moz-transition: all 0.6s ease-in-out;
| |
| − | -o-transition: all 0.6s ease-in-out;
| |
| − | -ms-transition: all 0.6s ease-in-out;
| |
| − | transition: all 0.6s ease-in-out;
| |
| − | }
| |
| − | .gallery-items img {
| |
| − | width: 400px;
| |
| − | height: 400px;
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1,
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2,
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{
| |
| − | opacity: 1;
| |
| − | -webkit-transform: scale(1.1);
| |
| − | -moz-transform: scale(1.1);
| |
| − | -o-transform: scale(1.1);
| |
| − | -ms-transform: scale(1.1);
| |
| − | transform: scale(1.1);
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1),
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2),
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){
| |
| − | opacity: 0.1;
| |
| − | -webkit-transform: scale(0.5);
| |
| − | -moz-transform: scale(0.5);
| |
| − | -o-transform: scale(0.5);
| |
| − | -ms-transform: scale(0.5);
| |
| − | transform: scale(0.5);
| |
| − | }
| |
| − | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span,
| |
| − | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span,
| |
| − | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{
| |
| − | display:none;
| |
| − | }
| |
| − |
| |
| − | /**********select-gallery over*******/
| |
| − |
| |
| − | #three-line-text p{
| |
| − | margin-left: 20px;
| |
| − | font-family: "Microsoft yahei";
| |
| − | color: #0073A5;
| |
| − | }
| |
| − | #three-line-text a{
| |
| − | font-family: "Microsoft yahei";
| |
| − | color: #0073A5;
| |
| − | }
| |
| − |
| |
| − | #threeline-left {
| |
| − | float: left;
| |
| − | width: 270px;
| |
| − | margin:10px 0 0 50px;
| |
| − | }
| |
| − | #threeline-middle {
| |
| − | float: left;
| |
| − | width: 290px;
| |
| − | margin:10px 0 0 20px;
| |
| − | }
| |
| − | #threeline-right {
| |
| − | float: right;
| |
| − | width: 290px;
| |
| − | margin: 10px 60px;
| |
| − |
| |
| − | }
| |
| − | /* ____________________________________ Slide 10 照片____________________________________ */
| |
| − | #slide10 {
| |
| − | width:90%;
| |
| − | padding: 20px 0 0 30px;
| |
| − | }
| |
| − |
| |
| − | /* _________________ PORTFOLIO ________________ */
| |
| − | .gallery-list {
| |
| − | text-align:center;
| |
| − | margin-right:-20px !important;
| |
| − | }
| |
| − | #slide10 .hover_img {
| |
| − | overflow:hidden;
| |
| − | position:relative;
| |
| − | height:291px;
| |
| − | width:255px;
| |
| − | background:#fff;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .img_block {
| |
| − | display:inline-block;
| |
| − | margin:0;
| |
| − | width:251px;
| |
| − | height:100%;
| |
| − | }
| |
| − |
| |
| − | .img_block_bg {
| |
| − | position:absolute;
| |
| − | z-index:100;
| |
| − | left:0;
| |
| − | top:0;
| |
| − | }
| |
| − |
| |
| − | .portfolio_zoom, .portfolio_link {
| |
| − | width:42px;
| |
| − | height:42px;
| |
| − | position:absolute;
| |
| − | z-index:110;
| |
| − | bottom:85px;
| |
| − | background-repeat:no-repeat;
| |
| − | opacity:0.61;
| |
| − | filter: alpha(opacity=61);
| |
| − | transition: all 0.1s ease-in-out;
| |
| − | -moz-transition: all 0.1s ease-in-out;
| |
| − | -webkit-transition: all 0.1s ease-in-out;
| |
| − | -o-transition: all 0.1s ease-in-out;
| |
| − | }
| |
| − | .portfolio_zoom {
| |
| − | left:-77px;
| |
| − | }
| |
| − | .portfolio_link {
| |
| − | right:-77px;
| |
| − | }
| |
| − | .portfolio_zoom:hover, .portfolio_link:hover {
| |
| − | opacity:1;
| |
| − | filter: alpha(opacity=100);
| |
| − | z-index:310;
| |
| − | }
| |
| − | .portfolio_zoom a, .portfolio_link a {
| |
| − | display:block;
| |
| − | width:42px;
| |
| − | height:42px;
| |
| − | text-indent:-9999px;
| |
| − | }
| |
| − |
| |
| − | .img_block:hover .portfolio_zoom {left:83px;transition-delay: 0.3s;
| |
| − | }
| |
| − | .img_block:hover .portfolio_link {right:84px;transition-delay: 0.3s;
| |
| − | }
| |
| − |
| |
| − | .item_description {
| |
| − | position:absolute;
| |
| − | top:-273px;
| |
| − | width:255px;
| |
| − | height:291px;
| |
| − | padding:0;
| |
| − | background:#f14833;
| |
| − | font-family: Helvetica ;
| |
| − | font-size: 14px;
| |
| − | line-height: 20px;
| |
| − | font-weight: 400;
| |
| − | text-align:center;
| |
| − | color:#fff;
| |
| − | transition: all 0.3s ease-in-out;
| |
| − | -moz-transition: all 0.3s ease-in-out;
| |
| − | -webkit-transition: all 0.3s ease-in-out;
| |
| − | -o-transition: all 0.3s ease-in-out;
| |
| − | }
| |
| − | .item_description p {
| |
| − | padding:74px 10px 0 50px;
| |
| − | text-transform:uppercase;
| |
| − | font-size:18px;
| |
| − | }
| |
| − | .img_block:hover .item_description {
| |
| − | top:20px;
| |
| − | }
| |
| − | .img_block .portf_img {
| |
| − | position:absolute;
| |
| − | left:18px;
| |
| − | top:18px;
| |
| − | width: 100%;
| |
| − | height: 90%;
| |
| − | transition: all 0.3s ease-in-out;
| |
| − | -moz-transition: all 0.3s ease-in-out;
| |
| − | -webkit-transition: all 0.3s ease-in-out;
| |
| − | -o-transition: all 0.3s ease-in-out;
| |
| − | }
| |
| − | .img_block:hover .portf_img {
| |
| − | position:absolute;
| |
| − | top:235px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /* ________________ //PORTFOLIO _______________ */
| |
| − |
| |
| − | /* ___________ //Slide 10 ___________________*/
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /****************gallery in education**********/
| |
| − | /****gallery ***********/
| |
| − | .gallery{
| |
| − | width: 600px;
| |
| − | height: 100%;
| |
| − | position: relative;
| |
| − | text-align: center;
| |
| − | margin-right: 20px;
| |
| − | display: inline;
| |
| − | }
| |
| − |
| |
| − | .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg,
| |
| − | .cr-bgimg div span:nth-child(1){
| |
| − | background-image: url(https://static.igem.org/mediawiki/2015/c/cb/CHINA_CD_UESTC_KINDER01.JPG);
| |
| − | background-size: 400%;
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg,
| |
| − | .cr-bgimg div span:nth-child(2){
| |
| − | background-image: url(https://static.igem.org/mediawiki/2015/5/55/CHINA_CD_UESTC_KINDER02.JPG);
| |
| − | background-size: 400%;
| |
| − |
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg,
| |
| − | .cr-bgimg div span:nth-child(3){
| |
| − | background-image: url(https://static.igem.org/mediawiki/2015/3/3c/CHINA_CD_UESTC_KINDER03.JPG);
| |
| − | background-size: 400%;
| |
| − |
| |
| − | }
| |
| − | .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg,
| |
| − | .cr-bgimg div span:nth-child(4){
| |
| − | background-image: url(https://static.igem.org/mediawiki/2015/6/62/CHINA_CD_UESTC_KINDER04.JPG);
| |
| − | background-size: 400%;
| |
| − | }
| |
| − | /*************gallery 2***********/
| |
| − |
| |
| − | #gal {
| |
| − | position:relative;
| |
| − | width:700px;
| |
| − | height:400px;
| |
| − | margin:0 120px 0 150px;
| |
| − | background:#FFF;
| |
| − | }
| |
| − | #gal:after {
| |
| − | content:'';
| |
| − | position:absolute;
| |
| − | bottom:24px;
| |
| − | right:0;
| |
| − | left:0;
| |
| − | width:100%;
| |
| − | height:1px;
| |
| − | background:rgba(255,255,255,0.35);
| |
| − | z-index:3;
| |
| − | }
| |
| − | input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] {
| |
| − | position:absolute;
| |
| − | bottom:80px;
| |
| − | display:block;
| |
| − | width:22px;
| |
| − | height:22px;
| |
| − | top:350px;
| |
| − | -webkit-border-radius:50%;
| |
| − | -moz-border-radius:50%;
| |
| − | border-radius:50%;
| |
| − | cursor:pointer;
| |
| − | }
| |
| − | input[class="re_radio"] {
| |
| − | opacity:0;
| |
| − | z-index:200;
| |
| − | }
| |
| − | input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;}
| |
| − | input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;}
| |
| − | input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;}
| |
| − | input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;}
| |
| − | input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;}
| |
| − | input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;}
| |
| − | input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;}
| |
| − | input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;}
| |
| − |
| |
| − | input[class="re_radio"] + label[class="re_label"] {
| |
| − | background:rgba(2, 2, 2, 0.46);
| |
| − | z-index:7;
| |
| − | -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
| |
| − | -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
| |
| − | box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15);
| |
| − | -webkit-transition:all .3s;
| |
| − | -moz-transition:all .3s;
| |
| − | -o-transition:all .3s;
| |
| − | transition:all .3s;
| |
| − | }
| |
| − | [class*="entypo-"]:before {
| |
| − | position:absolute;
| |
| − | font-family: 'entypo', sans-serif;
| |
| − | }
| |
| − | figure[class*="entypo-"]:before {
| |
| − | left:10px;
| |
| − | top:5px;
| |
| − | font-size:2rem;
| |
| − | color:rgba(255,255,255,0);
| |
| − | z-index:1;
| |
| − | -webkit-transition:color .1s;
| |
| − | -moz-transition:color .1s;
| |
| − | -o-transition:color .1s;
| |
| − | transition:color .1s;
| |
| − | }
| |
| − | a[class*="entypo-"]:before {
| |
| − | top:8px;
| |
| − | left:9px;
| |
| − | font-size:1.5rem;
| |
| − | color:white;
| |
| − | }
| |
| − | a:hover[class*="entypo-"]:before {
| |
| − | color:white;
| |
| − | }
| |
| − | figure, figure img, figcaption {
| |
| − | position:absolute;
| |
| − | top:0;
| |
| − | right:0;
| |
| − | }
| |
| − | figure {
| |
| − | bottom:0;
| |
| − | left:0;
| |
| − | width:600px;
| |
| − | height:300px;
| |
| − | display:block;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − | figure img {
| |
| − | bottom:0;
| |
| − | left:0;
| |
| − | display:block;
| |
| − | width:700px;
| |
| − | height:400px;
| |
| − | z-index:1;
| |
| − | -webkit-transform:translateX(600px);
| |
| − | -moz-transform:translateX(600px);
| |
| − | -ms-transform:translateX(600px);
| |
| − | -o-transform:translateX(600px);
| |
| − | transform:translateX(600px);
| |
| − | -webkit-transition:all .15s .15s, z-index 0s;
| |
| − | -moz-transition:all .15s .15s, z-index 0s;
| |
| − | -o-transition:all .15s .15s, z-index 0s;
| |
| − | transition:all .15s .15s, z-index 0s;
| |
| − | }
| |
| − | figcaption {
| |
| − | display:block;
| |
| − | width:270px;
| |
| − | height:300px;
| |
| − | background-image: radial-gradient(rgba(161, 255, 0, 0.3), #D7E84B); background-size:600px 600px;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:-300px -150px;
| |
| − | text-align:center;
| |
| − | z-index:3;
| |
| − | -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
| |
| − | -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
| |
| − | box-shadow:-5px 0px 20px rgba(0,0,0,0.1);
| |
| − | -webkit-transform:translateX(300px);
| |
| − | -moz-transform:translateX(300px);
| |
| − | -ms-transform:translateX(300px);
| |
| − | -o-transform:translateX(300px);
| |
| − | transform:translateX(300px);
| |
| − | -webkit-transition:all .35s;
| |
| − | -moz-transition:all .35s;
| |
| − | -o-transition:all .35s;
| |
| − | transition:all .35s;
| |
| − | }
| |
| − |
| |
| − | figcaption nav ul {display:block;padding-top:10px;}
| |
| − | figcaption nav ul li {display:inline-block;margin-left:5px;}
| |
| − | figcaption nav ul li a {
| |
| − | position:relative;
| |
| − | display:block;
| |
| − | width:40px;
| |
| − | height:40px;
| |
| − | background:rgba(255,255,255,0.2);
| |
| − | text-decoration:none;
| |
| − | color:white;
| |
| − | -webkit-border-radius:50%;
| |
| − | -moz-border-radius:50%;
| |
| − | border-radius:50%;
| |
| − | -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
| |
| − | -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
| |
| − | box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0);
| |
| − | -webkit-transition:all .15s;
| |
| − | -moz-transition:all .15s;
| |
| − | -o-transition:all .15s;
| |
| − | transition:all .15s;
| |
| − | }
| |
| − | figcaption nav ul li a:hover {
| |
| − | background:rgba(255,255,255,0);
| |
| − | -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
| |
| − | -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
| |
| − | box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1);
| |
| − | }
| |
| − | figcaption p {
| |
| − | padding:5px 15px;
| |
| − | font-family:'Titillium Web', sans-serif;
| |
| − | font-weight:300;
| |
| − | color:#333;
| |
| − | background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35)));
| |
| − | background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
| |
| − | background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
| |
| − | background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
| |
| − | background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%);
| |
| − | background-size:1px 100%;
| |
| − | background-repeat:no-repeat;
| |
| − | background-position:50% 0%;
| |
| − | }
| |
| − |
| |
| − | input[class="re_radio"]:hover + label[class="re_label"] {
| |
| − | background:rgba(255,255,255,0.6);
| |
| − | }
| |
| − | input[class="re_radio"]:checked + label[class="re_label"] {
| |
| − | background:rgba(255,209,0,1);
| |
| − | -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
| |
| − | -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3);
| |
| − | box-shadow:0px 0px 0px 5px rgba(0,0,0,0.8);
| |
| − | }
| |
| − | input[class="re_radio"]:checked + label[class="re_label"]:before {}
| |
| − | input[class="re_radio"]:checked ~ figure img {
| |
| − | z-index:2;
| |
| − | -webkit-transform:translatex(0px);
| |
| − | -moz-transform:translatex(0px);
| |
| − | -ms-transform:translatex(0px);
| |
| − | -o-transform:translatex(0px);
| |
| − | transform:translatex(0px);
| |
| − | -webkit-transition:all .15s, z-index 0s;
| |
| − | -moz-transition:all .15s, z-index 0s;
| |
| − | -o-transition:all .15s, z-index 0s;
| |
| − | transition:all .15s, z-index 0s;
| |
| − | }
| |
| − | input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before {
| |
| − | z-index:3;
| |
| − | color:rgba(255,255,255,0.5);
| |
| − | -webkit-transition:color .5s;
| |
| − | -moz-transition:color .5s;
| |
| − | -o-transition:color .5s;
| |
| − | transition:color .5s;
| |
| − | }
| |
| − | input[class="re_radio"]:checked ~ figure figcaption {
| |
| − | z-index:8;
| |
| − | -webkit-transform:translateX(0px);
| |
| − | -moz-transform:translateX(0px);
| |
| − | -ms-transform:translateX(0px);
| |
| − | -o-transform:translateX(0px);
| |
| − | transform:translateX(0px);
| |
| − | -webkit-transition:all .35s, .7s;
| |
| − | -moz-transition:all .35s, .7s;
| |
| − | -o-transition:all .35s, .7s;
| |
| − | transition:all .35s, .7s;
| |
| − | }
| |
| − | .entypo-forward {
| |
| − | margin: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | border: 17px solid #fff;
| |
| − | box-shadow:1px 1px 3px rgba(221, 226, 207, 0.26);
| |
| − | border-radius: 20px;
| |
| − | }
| |
| − | .entypo-forward p {
| |
| − | color: #000;
| |
| − | font-size: 19px;
| |
| − | font-family: 'Microsoft YaHei'
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | /************two line picture********/
| |
| − | .two_line_pic {
| |
| − | display: inline-block;
| |
| − | position: relative;
| |
| − | margin: 10px 0px 50px 20px;
| |
| − | padding: 20px;
| |
| − | border: 10px solid #fff;
| |
| − | box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29);
| |
| − | }
| |
| − | .left_pic {
| |
| − | float: left;
| |
| − | margin-left: 50px;
| |
| − | }
| |
| − | .right_pic {
| |
| − | float: right;
| |
| − | margin-left: 5px;
| |
| − | }
| |
| − | /**************end two line pic******/
| |
| − | /********end of gallery 2*********/
| |
| − |
| |
| − | /***************protocol************/#page {
| |
| − | margin-bottom: 200px;
| |
| − | z-index: 1000;
| |
| − | }
| |
| − | #page ul li{
| |
| − | list-style: none;
| |
| − | }
| |
| − | .leftside{
| |
| − | color: #000;
| |
| − | float:left;
| |
| − | width:17%;
| |
| − | }
| |
| − | #page .leftside li a {
| |
| − | cursor:pointer;
| |
| − | color: #000;
| |
| − | }
| |
| − |
| |
| − | .rightside{
| |
| − | float:left;
| |
| − | margin-left:5%;
| |
| − | width:78%;
| |
| − | height:600px;
| |
| − | overflow:hidden;
| |
| − | }
| |
| − | .protocol{
| |
| − | display:none;
| |
| − | width:95%;
| |
| − | margin-bottom:20px;
| |
| − | }
| |
| − | .protocolactive{
| |
| − | display:block;
| |
| − | width:95%;
| |
| − | border: 5px solid #DDE8E8;
| |
| − |
| |
| − | margin-bottom:20px;
| |
| − | }
| |
| − |
| |
| − | /*********green button***********/
| |
| − | .button{
| |
| − | width: 160px;
| |
| − | line-height: 38px;
| |
| − | text-align: center;
| |
| − | font-size: 20px;
| |
| − | position: relative;
| |
| − | overflow: hidden;
| |
| − |
| |
| − |
| |
| − | color: rgba(255,255,255,1);
| |
| − | text-decoration: none;
| |
| − | background-color: rgba(219,87,5,1);
| |
| − | font-family: 'Yanone Kaffeesatz','Microsoft yahei';
| |
| − | display: block;
| |
| − | padding: 4px;
| |
| − | -webkit-border-radius: 8px;
| |
| − | -moz-border-radius: 8px;
| |
| − | border-radius: 8px;
| |
| − |
| |
| − | }
| |
| − | .button.green{
| |
| − | -webkit-box-shadow:0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
| |
| − | -moz-box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
| |
| − | box-shadow: 0px 2px 0px rgba(251, 253, 63, 0.2), 0px 3px 10px rgba(0,0,0,.7);
| |
| − |
| |
| − | -webkit-transition: all .3s ease;
| |
| − | -moz-transition: all .3s ease;
| |
| − | -ms-transition: all .3s ease;
| |
| − | -o-transition: all .3s ease;
| |
| − | transition: all .3s ease;
| |
| − |
| |
| − |
| |
| − | }
| |
| − | .green.larrow:before{
| |
| − | background: #64C878;
| |
| − | }
| |
| − | .green.larrow:after{
| |
| − | -webkit-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | -moz-box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | box-shadow: 0px 3px 0px rgb(255, 177, 13), 0px 3px 6px rgba(0,0,0,.9);
| |
| − | background-color: rgba(255, 178, 29, 0.9);
| |
| − | color: rgb(255, 255, 255);}}
| |
| − |
| |
| − | /***green button over*/
| |
| − | table.tftable {font-size:12px;color:#333333;width:90%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;}
| |
| − | table.tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;}
| |
| − | table.tftable tr {background-color:#ffffff;}
| |
| − | table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;}
| |
| − | /*******************end protocol**********/
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | /**************vector*****************/
| |
| − | .vector {
| |
| − | width: 80%;
| |
| − | margin: 10px 0 0 200px;
| |
| − | }
| |
| − | .vector h2 {
| |
| − | font-size: 20px;
| |
| − | font-family: Helvetica;
| |
| − | text-decoration: none;
| |
| − | border: 0;
| |
| − | font-weight: bold;
| |
| − | }
| |
| − | .vector p {
| |
| − | font-size: 20px;
| |
| − | font-family:Helvetica;
| |
| − |
| |
| − | }
| |
| − | .vector img {
| |
| − | margin-top: 10px;
| |
| − | }
| |
| − | #brief_text {
| |
| − | margin: 0;
| |
| − | font-family: Helvetica;
| |
| − | font-weight: 600;
| |
| − | font-size: 20px;
| |
| − | font-style: normal;
| |
| − | line-height: 36px;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*____________________________grid.css________________________________*/
| |
| − |
| |
| − | /* Computer */
| |
| − | .grid_1 { width: 6.5%; }
| |
| − | .grid_2 { width: 15%; }
| |
| − | .grid_3 { width: 23.5%; }
| |
| − | .grid_4 { width: 32%; }
| |
| − | .grid_5 { width: 40.5%; }
| |
| − | .grid_6 { width: 49%; }
| |
| − | .grid_7 { width: 57.5%; }
| |
| − | .grid_8 { width: 90%; font-family: Verdana,Arial ;
| |
| − | }
| |
| − | .grid_9 { width: 74.5%; }
| |
| − | .grid_10 { width: 83%; }
| |
| − | .grid_11 { width: 91.5%; }
| |
| − | .grid_12 { width: 100%; }
| |
| − |
| |
| − | .grid_1,
| |
| − | .grid_2,
| |
| − | .grid_3,
| |
| − | .grid_4,
| |
| − | .grid_5,
| |
| − | .grid_6,
| |
| − | .grid_7,
| |
| − | .grid_8,
| |
| − | .grid_9,
| |
| − | .grid_10,
| |
| − | .grid_11,
| |
| − | .grid_12 {
| |
| − | margin:20px 0 0 0;
| |
| − | float: left;
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | .alpha {margin-left:0;}
| |
| − | .omega {margin-right:0;}
| |
| − | .gallery-list {margin:0;padding:0;}
| |
| − | .little_respond {display:none;}
| |
| − |
| |
| − | .container{
| |
| − | width: 100%;
| |
| − | max-width: 1000px;
| |
| − | margin: auto;
| |
| − |
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
| |
| − | .clearfix:after{position:relative;z-index:99;clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}
| |
| − |
| |
| − | @media (orientation: portrait) {
| |
| − | .slide{background-attachment: scroll;background-position:0 0 !important;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | @media only screen and (min-width: 321px) and (max-width: 980px) {
| |
| − | #title {
| |
| − | position: fixed;
| |
| − | font-size: 80px;
| |
| − | left:250px;
| |
| − | z-index: 5;
| |
| − |
| |
| − | }
| |
| − |
| |
| − | #firstTitle {
| |
| − | width:700px;
| |
| − | }
| |
| − | #firstTitle p {
| |
| − | font-size: 60px;
| |
| − | }
| |
| − |
| |
| − | .transparent_class{
| |
| − | top: 280px;
| |
| − | width: 640px;
| |
| − | left: 20px;
| |
| − | }
| |
| − | #RightContentText {
| |
| − | top: 470px;
| |
| − | width: 655px;
| |
| − | left: 13px;
| |
| − | right: 8px;
| |
| − | }
| |
| − | .gallery-container {
| |
| − | width: 80%;
| |
| − | margin: 60px 0px 30px 100px;
| |
| − | display: block;
| |
| − | }
| |
| − | .gallery-items {
| |
| − | width: 800px;
| |
| − | }
| |
| − | .gallery-items li {
| |
| − | width: 210px;
| |
| − | height: 180px;
| |
| − | }
| |
| − | .gallery-items a {
| |
| − | height: 130px;
| |
| − | width: 190px;
| |
| − | margin-left: 4px;
| |
| − | margin-right: 4px;
| |
| − | margin-top: 10px;
| |
| − | }
| |
| − | #HZpic {
| |
| − | background-position: 0 0 !important;
| |
| − | width: 90%;
| |
| − | padding: 10px;
| |
| − | margin-top: 20px;}
| |
| − |
| |
| − | .client_foto {
| |
| − | height: 380px;
| |
| − | width: 240px;
| |
| − | }
| |
| − | #slide12 {width: 97%;}
| |
| − | #slide12 h5 {
| |
| − | margin: 5px 0 0 0;
| |
| − | font-size: 25px;
| |
| − | line-height: 25px;
| |
| − | }
| |
| − | #slide12 h6 {
| |
| − | font-size: 15px;
| |
| − | line-height: 17px;
| |
| − | }
| |
| − | #slide12 p {
| |
| − | font-size: 14px;
| |
| − | font-family: Helvetica,'Microsoft Yahei';
| |
| − | text-align: initial;
| |
| − | }
| |
| − | #content {
| |
| − | height: 50px;
| |
| − | }
| |
| − | h2{font-size: 30px;
| |
| − | line-height: 52px;
| |
| − | }
| |
| − |
| |
| − | h4 {font-size: 22px;
| |
| − | line-height: 36px;
| |
| − | }
| |
| − |
| |
| − | p{
| |
| − | font-size: 15px;
| |
| − | }
| |
| − | #threeline-left {
| |
| − | float: left;
| |
| − | width: 150px;
| |
| − | margin: 10px 0 0 3px;
| |
| − | }
| |
| − | #threeline-middle {
| |
| − | float: left;
| |
| − | width: 230px;
| |
| − | margin: 10px 0 0 0px;
| |
| − | }
| |
| − | #threeline-right {
| |
| − | float: right;
| |
| − | width: 250px;
| |
| − | margin: 10px 20px 0 0px;
| |
| − | }
| |
| − | #gal {
| |
| − | width: 600px;
| |
| − | margin: 0 120px 0 0px;
| |
| − | }
| |
| − | .two_line_pic img {
| |
| − | width: 250px;
| |
| − | height: 180px;
| |
| − | }
| |
| − | .left_pic {
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − | .button {
| |
| − | width: 120px;
| |
| − | }
| |
| − |
| |
| − | .exhib_cont {
| |
| − | width: 240px;
| |
| − | }
| |
| − | .vector {
| |
| − | width: 100%;
| |
| − | margin: 10px 0 0 10px;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | @media only screen and (min-width: 970px) and (max-width: 980px) {
| |
| − | .gallery-list {
| |
| − | display: none;
| |
| − | }
| |
| − | #gal {
| |
| − | display: none;
| |
| − | }
| |
| − | }
| |
| − | /*____________________________//grid.css________________________________*/
| |