Difference between revisions of "Template:Team:CHINA CD UESTC/cssstyle"
(20 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
#RightContent { | #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 { | .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{ | .blockWords{ | ||
− | + | font-family:Arial, Helvetica, sans-serif; | |
− | + | font-size: 19px; | |
− | + | padding: 15px; | |
− | + | color: #ffffff; | |
} | } | ||
− | |||
#HZpic { | #HZpic { | ||
− | + | background-position:0 0 !important; | |
− | + | width:100%; | |
− | + | padding:10px 40px 20px 40px; | |
− | + | margin-top:20px; | |
} | } | ||
+ | |||
+ | /*****go-top*******/ | ||
+ | .actGotop{ | ||
+ | position:fixed; | ||
+ | _position:absolute; | ||
+ | bottom:100px; | ||
+ | right:50px; | ||
+ | width:150px; | ||
+ | height:195px; | ||
+ | display:none; | ||
+ | } | ||
+ | .actGotop a,.actGotop a:link{ | ||
+ | width:150px; | ||
+ | height:195px; | ||
+ | display:inline-block; | ||
+ | background:url(https://static.igem.org/mediawiki/2015/e/ed/CHINA_CD_UESTC_gotop.png) no-repeat; | ||
+ | _background:url(https://static.igem.org/mediawiki/2015/e/ed/CHINA_CD_UESTC_gotop.png) no-repeat; | ||
+ | outline:none; | ||
+ | } | ||
+ | .actGotop a:hover{ | ||
+ | width:150px; | ||
+ | height:195px; | ||
+ | background:url(https://static.igem.org/mediawiki/2015/e/ed/CHINA_CD_UESTC_gotop.png) no-repeat; | ||
+ | outline:none; | ||
+ | } | ||
+ | |||
+ | /********end-top*******/ | ||
#content{ | #content{ | ||
− | + | height:90px; | |
− | + | padding: 0px 0px 0px 0px; | |
− | + | border-left: 0px solid #444444; | |
− | + | border-right: 0px solid #444444; | |
− | + | background:none; | |
} | } | ||
#title { | #title { | ||
− | + | position: fixed; | |
− | + | font-size: 80px; | |
− | + | left:260px; | |
− | + | z-index: 5; | |
} | } | ||
#firstTitle { | #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 { | #firstTitle p { | ||
− | + | text-align: center; | |
− | + | font-size: 80px; | |
} | } | ||
.transparent_class { | .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 { | #RightContentText { | ||
− | + | position: absolute; | |
− | + | top: 510px; | |
− | + | width: 1048px; | |
− | + | left:28px; | |
− | + | right:8px; | |
− | + | background:#FFFFFF; | |
− | + | color: #000000; | |
− | + | transition: all 200ms ease-out; | |
− | + | transform: translate3d(0, 0, 0); | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
.slide{ | .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; | |
} | } | ||
#RightContentText h2 { | #RightContentText 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: 30px; | |
− | + | line-height: 82px; | |
− | + | color:#343434; | |
− | + | font-weight: 300; | |
} | } | ||
#RightContentText h3 { | #RightContentText h3 { | ||
− | + | margin:0; | |
− | + | padding:40px 0 32px 0; | |
− | + | text-align:left; | |
− | + | font-family: Helvetica ; | |
− | + | font-weight:800; | |
− | + | font-size:32px; | |
− | + | font-style:normal; | |
− | + | line-height:36px; | |
} | } | ||
#RightContentText h4 { | #RightContentText 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; | |
} | } | ||
#RightContentText a { | #RightContentText a { | ||
Line 158: | Line 180: | ||
} | } | ||
img.icon_img { | img.icon_img { | ||
− | + | float:left; | |
− | + | margin-right:20px; | |
− | + | margin-top:20px; | |
− | + | margin-bottom:25px; | |
} | } | ||
.effect_2 { | .effect_2 { | ||
− | + | position:relative; | |
− | + | top:0; | |
− | + | bottom:-57px; | |
− | + | height:100%; | |
− | + | z-index:999 !important; | |
} | } | ||
/*________________________Judging__________________*/ | /*________________________Judging__________________*/ | ||
#bronze h3{ | #bronze h3{ | ||
− | + | text-align: center; | |
− | + | background-image: url(); | |
− | + | background-repeat: no-repeat; | |
− | + | text-decoration:underline; | |
+ | color: #e8b77c; | ||
} | } | ||
#silver h3{ | #silver h3{ | ||
− | + | text-align: center; | |
− | + | background-image: url(); | |
− | + | background-repeat: no-repeat; | |
− | + | text-decoration:underline; | |
+ | color: #b4c8cb; | ||
} | } | ||
#gold h3{ | #gold h3{ | ||
− | + | text-align: center; | |
− | + | background-image: url(); | |
− | + | background-repeat: no-repeat; | |
− | + | text-decoration:underline; | |
+ | color: #fbca23; | ||
} | } | ||
.req_list{ | .req_list{ | ||
− | + | width: 90%; | |
} | } | ||
.req_list h1{ | .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{ | .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 标准文本_______________ */ | /* ____________ Slide 2 标准文本_______________ */ | ||
#slide2 { | #slide2 { | ||
− | + | width:100%; | |
− | + | padding:20px 0 20px; | |
} | } | ||
Line 228: | Line 253: | ||
} | } | ||
.det_inf li a { | .det_inf li a { | ||
− | + | color:#929292; | |
} | } | ||
.det_inf li a:hover { | .det_inf li a:hover { | ||
− | + | color:#f14833; | |
} | } | ||
Line 245: | Line 270: | ||
#slide4 { | #slide4 { | ||
− | + | width:100%; | |
− | + | padding:86px 0 69px; | |
} | } | ||
#slide4 h2 { | #slide4 h2 { | ||
− | + | color:#b8b8b8; | |
− | + | border-bottom:1px solid #3b3b3b; | |
} | } | ||
Line 256: | Line 281: | ||
/* ____________ SERVICES_BLOCK ___________ */ | /* ____________ SERVICES_BLOCK ___________ */ | ||
a.servc_block { | a.servc_block { | ||
− | + | display:block; | |
− | + | position:relative; | |
− | + | text-align:center; | |
− | + | color:#6f6f6f; | |
} | } | ||
.icon_bord { | .icon_bord { | ||
− | + | position:relative; | |
− | + | z-index:10; | |
− | + | top:0; | |
− | + | left:50%; | |
− | + | margin-left:-51px; | |
− | + | width:102px; | |
− | + | height:116px; | |
} | } | ||
.icon1, .icon1_h { | .icon1, .icon1_h { | ||
− | + | position:absolute; | |
− | + | z-index:1; | |
− | + | top:0; | |
− | + | left:0; | |
} | } | ||
.servc_block .icon1 { | .servc_block .icon1 { | ||
− | + | transition: all 0.5s ease-out; | |
− | + | opacity: 1; | |
} | } | ||
.servc_block:hover .icon1 { | .servc_block:hover .icon1 { | ||
− | + | transform: rotate(720deg) scale(0); | |
− | + | opacity: 0; | |
} | } | ||
.servc_block .icon1_h { | .servc_block .icon1_h { | ||
− | + | transition: all 0.5s ease-out; | |
− | + | transform: rotate(720deg) scale(0); | |
− | + | opacity: 0; | |
} | } | ||
.servc_block:hover .icon1_h { | .servc_block:hover .icon1_h { | ||
− | + | transform: rotate(720deg) scale(1); | |
− | + | opacity: 1; | |
− | + | transition-delay: 0.4s; | |
} | } | ||
.servc_block p { | .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 { | .servc_block:hover p { | ||
− | + | color:#f14833; | |
− | + | transition-delay: 0.7s; | |
} | } | ||
Line 325: | Line 350: | ||
#slide6 { | #slide6 { | ||
− | + | width:100%; | |
− | + | padding:30px 0 30px; | |
} | } | ||
Line 336: | Line 361: | ||
.exhib_block .fleft {margin-left:1px;} | .exhib_block .fleft {margin-left:1px;} | ||
.exhib_line_center { | .exhib_line_center { | ||
− | + | position:absolute; | |
− | + | left:50%; | |
− | + | top:12px; | |
− | + | width:1px; | |
− | + | height:100%; | |
− | + | background:#c3c3c3; | |
} | } | ||
.exhib_block p { | .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_cont:hover p {color:#f14833; | ||
Line 361: | Line 386: | ||
.exhib_cont { | .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 { | .exhib_block .fright { | ||
− | + | position: relative; | |
− | + | left:52%; | |
− | + | margin-top:50px; | |
} | } | ||
.exhib_cont:hover { | .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 { | .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 { | .exhib_date_top { | ||
− | + | left:49.5%; | |
− | + | top:0; | |
− | + | width:95px; | |
− | + | text-align:right; | |
} | } | ||
.exhib_date_left { | .exhib_date_left { | ||
− | + | left:-220px; | |
− | + | top:27px; | |
} | } | ||
.exhib_date_right { | .exhib_date_right { | ||
− | + | right:-230px; | |
− | + | 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_cont:hover .exhib_date_right, .exhib_cont:hover .exhib_date_left, .exhib_cont:hover .exhib_date_top {font-size:30px; | ||
Line 431: | Line 456: | ||
#slide12 { | #slide12 { | ||
− | + | background:url(..) repeat left top; | |
− | + | background-position:0 0 !important; | |
− | + | width:100%; | |
− | + | padding:10px 0 20px; | |
− | + | margin-top:20px; | |
} | } | ||
#slide12 h2 {color:#OOOOOO; | #slide12 h2 {color:#OOOOOO; | ||
− | + | font-size:50px !important; | |
} | } | ||
Line 445: | Line 470: | ||
} | } | ||
#slide12 .foto { | #slide12 .foto { | ||
− | + | float:left; | |
− | + | margin:0 20px 20px 0; | |
} | } | ||
#slide12 h5 { | #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 { | #slide12 h6 { | ||
− | + | margin:0 0 0 0; | |
− | + | padding-bottom:2px; | |
− | + | text-align: justify; | |
− | + | text-transform:none; | |
− | + | font-family: Helvetica ; | |
− | + | font-size: 20px; | |
− | + | line-height: 23px; | |
− | + | font-weight: 300; | |
+ | color:#acacac; | ||
} | } | ||
.client_foto { | .client_foto { | ||
− | + | float:left; | |
− | + | position:relative; | |
− | + | margin:0 5px 10px 0; | |
− | + | height:460px; | |
− | + | width:400px; | |
} | } | ||
.client_foto img { | .client_foto img { | ||
− | + | position:absolute; | |
− | + | left:0; | |
− | + | top:0; | |
− | + | z-index:10; | |
− | + | width: 90%; | |
} | } | ||
.foto {z-index:5 !important;} | .foto {z-index:5 !important;} | ||
Line 487: | Line 513: | ||
.contact_det, | .contact_det, | ||
.contact_det a { | .contact_det a { | ||
− | + | color:#888888; | |
− | + | line-height:26px; | |
} | } | ||
.contact_det a:hover {color:#f14833;} | .contact_det a:hover {color:#f14833;} | ||
Line 499: | Line 525: | ||
/*_____________gallery___________________*/ | /*_____________gallery___________________*/ | ||
@font-face { | @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{ | .clr{ | ||
− | + | clear: both; | |
} | } | ||
.cr-gallery{ | .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{ | .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{ | .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{ | .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{ | .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-1:checked ~ label.cr-label-img-1, | ||
Line 571: | Line 597: | ||
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3, | .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{ | .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-1:checked ~ label.cr-label-img-1:before, | ||
Line 577: | Line 603: | ||
.cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3: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{ | .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{ | .cr-gallery input{ | ||
− | + | display: none; | |
} | } | ||
.cr-bgimg{ | .cr-bgimg{ | ||
− | + | width: 600px; | |
− | + | height: 400px; | |
− | + | position: absolute; | |
− | + | left: 0px; | |
− | + | top: 0px; | |
− | + | z-index: 1; | |
} | } | ||
.cr-bgimg{ | .cr-bgimg{ | ||
− | + | background-repeat: no-repeat; | |
− | + | background-position: 0 0; | |
} | } | ||
.cr-bgimg div{ | .cr-bgimg div{ | ||
− | + | width: 150px; | |
− | + | height: 100%; | |
− | + | position: relative; | |
− | + | float: left; | |
− | + | overflow: hidden; | |
− | + | background-repeat: no-repeat; | |
} | } | ||
.cr-bgimg div span{ | .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{ | .cr-bgimg div:nth-child(1) span{ | ||
− | + | background-position: 0px 0px; | |
} | } | ||
.cr-bgimg div:nth-child(2) span{ | .cr-bgimg div:nth-child(2) span{ | ||
− | + | background-position: -150px 0px; | |
} | } | ||
.cr-bgimg div:nth-child(3) span{ | .cr-bgimg div:nth-child(3) span{ | ||
− | + | background-position: -300px 0px; | |
} | } | ||
.cr-bgimg div:nth-child(4) span{ | .cr-bgimg div:nth-child(4) span{ | ||
− | + | background-position: -450px 0px; | |
} | } | ||
.cr-gallery input:checked ~ .cr-bgimg div span{ | .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{ | @-webkit-keyframes scaleOut{ | ||
− | + | 0%{ -webkit-transform: scale(1); opacity: 1; } | |
− | + | 100%{ -webkit-transform: scale(1.5); opacity: 0; } | |
} | } | ||
@-moz-keyframes scaleOut{ | @-moz-keyframes scaleOut{ | ||
− | + | 0%{ -moz-transform: scale(1); opacity: 1; } | |
− | + | 100%{ -moz-transform: scale(1.5); opacity: 0; } | |
} | } | ||
@-o-keyframes scaleOut{ | @-o-keyframes scaleOut{ | ||
− | + | 0%{ -o-transform: scale(1); opacity: 1; } | |
− | + | 100%{ -o-transform: scale(1.5); opacity: 0; } | |
} | } | ||
@-ms-keyframes scaleOut{ | @-ms-keyframes scaleOut{ | ||
− | + | 0%{ -ms-transform: scale(1); opacity: 1; } | |
− | + | 100%{ -ms-transform: scale(1.5); opacity: 0; } | |
} | } | ||
@keyframes scaleOut{ | @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-1:checked ~ .cr-bgimg div span:nth-child(1), | ||
Line 663: | Line 689: | ||
.cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) | .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{ | .cr-titles h3{ | ||
− | + | color: #fff; | |
− | + | text-shadow: 1px 1px 1px rgba(0,0,0,0.1); | |
} | } | ||
.cr-titles h3 span{ | .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){ | .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){ | .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{ | .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-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1), | ||
Line 729: | Line 755: | ||
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) 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){ | .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-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2), | ||
Line 736: | Line 762: | ||
.cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) 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){ | .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){ | ||
− | + | opacity: 1; | |
} | } | ||
@media screen and (max-width: 768px) { | @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-end______________*/ | ||
Line 755: | Line 781: | ||
/**************gallery******************/ | /**************gallery******************/ | ||
.gallery-items { | .gallery-items { | ||
− | + | width:970px; | |
− | + | height: 1000px; | |
− | + | margin:100px 0 0 70px; | |
− | + | position: relative; | |
− | + | left: -150px; | |
} | } | ||
.gallery-items a { | .gallery-items a { | ||
− | + | display:inline-block; | |
− | + | height:90%; | |
− | + | position:relative; | |
− | + | width:90%; | |
− | + | margin-left: 10px; | |
− | + | margin-right: 10px; | |
− | + | margin-top: 10px; | |
} | } | ||
.gallery-items a img { | .gallery-items a img { | ||
− | + | cursor:pointer; | |
− | + | display:inline-block; | |
− | + | height:100%; | |
− | + | left:0px; | |
− | + | position:absolute; | |
− | + | top:0px; | |
− | + | width:100%; | |
− | + | z-index:0; | |
− | + | border: 7px solid rgba(86, 45, 45, 0.33); | |
− | + | 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; | |
} | } | ||
p { | p { | ||
− | + | text-align: justify; | |
− | + | font-family: inherit; | |
− | + | font-size: 17px; | |
} | } | ||
/***********select-gallery*********/ | /***********select-gallery*********/ | ||
.gallery-container{ | .gallery-container{ | ||
− | + | width: 80%; | |
− | + | margin: 60px auto 30px 170px; | |
− | + | display: block; | |
} | } | ||
Line 816: | Line 842: | ||
.gallery-container label { | .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{ | .gallery-container label.gallery-label-type-all{ | ||
− | + | border-radius: 3px 0px 0px 3px; | |
} | } | ||
.gallery-container label.gallery-label-type-3{ | .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-all:checked ~ label.gallery-label-type-all, | ||
Line 857: | Line 883: | ||
.gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2, | .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{ | .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 80px; | |
− | + | } | |
− | + | #threeline-right { | |
− | + | float: right; | |
− | + | width: 290px; | |
− | + | margin: 10px 20px; | |
− | + | } | |
− | + | /* _______________ 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 ___________________*/ | |
Line 1,065: | Line 1,091: | ||
− | + | /****************gallery in education**********/ | |
− | + | /***************slide gallery***************/ | |
− | + | #owl-demo{position:relative;width:640px;height:390px;margin:20px auto 0 auto;} | |
− | + | #owl-demo .item{ position:relative;display:block;} | |
− | + | #owl-demo img{display:block;width:640px;height:390px;} | |
− | + | #owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;background-color: rgba(95, 193, 42, 0.53);} | |
− | + | .owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;} | |
− | + | .owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(https://static.igem.org/mediawiki/2015/7/78/CHINA_CD_UESTC_pribg01.png);*display:inline;*zoom:1;} | |
− | + | .owl-pagination .active{width:25px;background-image:url(https://static.igem.org/mediawiki/2015/c/c9/CHINA_CD_UESTC_pribg02.png);} | |
− | + | .owl-buttons{display:none;} | |
− | + | .owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;} | |
− | + | .owl-prev{left:0;background-image:url(https://static.igem.org/mediawiki/2015/2/29/CHINA_CD_UESTC_pribg03.png);} | |
− | + | .owl-next{right:-20px;background-image:url(https://static.igem.org/mediawiki/2015/d/dc/CHINA_CD_UESTC_pribg04.png);} | |
− | + | .owl-prev:hover{background-image:url(https://static.igem.org/mediawiki/2015/6/67/CHINA_CD_UESTC_pribg05.png);} | |
− | + | .owl-next:hover{background-image:url(https://static.igem.org/mediawiki/2015/f/f7/CHINA_CD_UESTC_pribg06.png);} | |
− | + | .owl-item {width: 100%;} | |
/* | /* | ||
− | * | + | * Core Owl Carousel CSS File |
− | * v1.3.3 | + | * v1.3.3 |
*/ | */ | ||
/* clearfix */ | /* clearfix */ | ||
.owl-carousel .owl-wrapper:after { | .owl-carousel .owl-wrapper:after { | ||
− | + | content: "."; | |
− | + | display: block; | |
− | + | clear: both; | |
− | + | visibility: hidden; | |
− | + | line-height: 0; | |
− | + | height: 0; | |
} | } | ||
/* display none until init */ | /* display none until init */ | ||
.owl-carousel{ | .owl-carousel{ | ||
− | + | display: none; | |
− | + | position: relative; | |
− | + | width: 100%; | |
− | + | -ms-touch-action: pan-y; | |
} | } | ||
.owl-carousel .owl-wrapper{ | .owl-carousel .owl-wrapper{ | ||
− | + | display: none; | |
− | + | position: relative; | |
− | + | -webkit-transform: translate3d(0px, 0px, 0px); | |
} | } | ||
.owl-carousel .owl-wrapper-outer{ | .owl-carousel .owl-wrapper-outer{ | ||
− | + | overflow: hidden; | |
− | + | position: relative; | |
− | + | width: 100%; | |
− | + | border: 10px solid #fff; | |
− | + | box-shadow: 1px 1px 3px rgba(24, 31, 3, 0.29); | |
} | } | ||
.owl-carousel .owl-wrapper-outer.autoHeight{ | .owl-carousel .owl-wrapper-outer.autoHeight{ | ||
− | + | -webkit-transition: height 500ms ease-in-out; | |
− | + | -moz-transition: height 500ms ease-in-out; | |
− | + | -ms-transition: height 500ms ease-in-out; | |
− | + | -o-transition: height 500ms ease-in-out; | |
− | + | transition: height 500ms ease-in-out; | |
} | } | ||
.owl-carousel .owl-item{ | .owl-carousel .owl-item{ | ||
− | + | float: left; | |
} | } | ||
.owl-controls .owl-page, | .owl-controls .owl-page, | ||
.owl-controls .owl-buttons div{ | .owl-controls .owl-buttons div{ | ||
− | + | cursor: pointer; | |
} | } | ||
.owl-controls { | .owl-controls { | ||
− | + | -webkit-user-select: none; | |
− | + | -khtml-user-select: none; | |
− | + | -moz-user-select: none; | |
− | + | -ms-user-select: none; | |
− | + | user-select: none; | |
− | + | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
} | } | ||
/* mouse grab icon */ | /* mouse grab icon */ | ||
.grabbing { | .grabbing { | ||
− | + | cursor:url(grabbing.png) 8 8, move; | |
} | } | ||
Line 1,147: | Line 1,173: | ||
.owl-carousel .owl-wrapper, | .owl-carousel .owl-wrapper, | ||
.owl-carousel .owl-item{ | .owl-carousel .owl-item{ | ||
− | + | -webkit-backface-visibility: hidden; | |
− | + | -moz-backface-visibility: hidden; | |
− | + | -ms-backface-visibility: hidden; | |
− | + | -webkit-transform: translate3d(0,0,0); | |
− | + | -moz-transform: translate3d(0,0,0); | |
− | + | -ms-transform: translate3d(0,0,0); | |
} | } | ||
Line 1,158: | Line 1,184: | ||
/****4 windows gallery ***********/ | /****4 windows gallery ***********/ | ||
.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-gallery input.cr-selector-img-1:checked ~ .cr-bgimg, | ||
.cr-bgimg div span:nth-child(1){ | .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-gallery input.cr-selector-img-2:checked ~ .cr-bgimg, | ||
.cr-bgimg div span:nth-child(2){ | .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-gallery input.cr-selector-img-3:checked ~ .cr-bgimg, | ||
.cr-bgimg div span:nth-child(3){ | .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-gallery input.cr-selector-img-4:checked ~ .cr-bgimg, | ||
.cr-bgimg div span:nth-child(4){ | .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%; | |
} | } | ||
/************two line picture********/ | /************two line picture********/ | ||
.two_line_pic { | .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 { | .left_pic { | ||
− | + | float: left; | |
− | + | margin-left: 50px; | |
} | } | ||
.right_pic { | .right_pic { | ||
− | + | float: right; | |
− | + | margin-left: 5px; | |
} | } | ||
/**************end two line pic******/ | /**************end two line pic******/ | ||
Line 1,209: | Line 1,235: | ||
/***************protocol************/ | /***************protocol************/ | ||
#page { | #page { | ||
− | + | margin-bottom: 200px; | |
− | + | z-index: 1000; | |
} | } | ||
#page ul li{ | #page ul li{ | ||
− | + | list-style: none; | |
} | } | ||
.leftside{ | .leftside{ | ||
− | + | color: #000; | |
− | + | float:left; | |
− | + | width:17%; | |
} | } | ||
#page .leftside li a { | #page .leftside li a { | ||
− | + | cursor:pointer; | |
− | + | color: #000; | |
} | } | ||
.rightside{ | .rightside{ | ||
− | + | float:left; | |
− | + | margin-left:5%; | |
− | + | width:78%; | |
− | + | height:600px; | |
− | + | overflow:hidden; | |
} | } | ||
.protocol{ | .protocol{ | ||
− | + | display:none; | |
− | + | width:95%; | |
− | + | margin-bottom:20px; | |
} | } | ||
.protocolactive{ | .protocolactive{ | ||
− | + | display:block; | |
− | + | width:95%; | |
− | + | border: 5px solid #DDE8E8; | |
− | + | margin-bottom:20px; | |
} | } | ||
/*********green button***********/ | /*********green button***********/ | ||
.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{ | .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{ | .green.larrow:before{ | ||
− | + | background: #64C878; | |
} | } | ||
.green.larrow:after{ | .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**********/ | /*******************end protocol**********/ | ||
Line 1,302: | Line 1,328: | ||
/**************vector*****************/ | /**************vector*****************/ | ||
.vector { | .vector { | ||
− | + | width: 80%; | |
− | + | margin: 10px 0 0 200px; | |
} | } | ||
.vector h2 { | .vector h2 { | ||
− | + | font-size: 20px; | |
− | + | font-family: Helvetica; | |
− | + | text-decoration: none; | |
− | + | border: 0; | |
− | + | font-weight: bold; | |
} | } | ||
.vector p { | .vector p { | ||
− | + | font-size: 20px; | |
− | + | font-family:Helvetica; | |
} | } | ||
.vector img { | .vector img { | ||
− | + | margin-top: 10px; | |
} | } | ||
#brief_text { | #brief_text { | ||
− | + | margin: 0; | |
− | + | font-family: Helvetica; | |
− | + | font-weight: 600; | |
− | + | font-size: 20px; | |
− | + | font-style: normal; | |
− | + | line-height: 36px; | |
} | } | ||
#pic_illustration { | #pic_illustration { | ||
− | + | font-size: 15px; | |
− | + | margin-left: -10%; | |
− | + | width: 90%; | |
} | } | ||
/***************************project_pic************/ | /***************************project_pic************/ | ||
.project_pic { | .project_pic { | ||
− | + | width: 100%; | |
− | + | padding: 10px 0px 10px 0px; | |
− | + | text-align: center; | |
} | } | ||
Line 1,346: | Line 1,372: | ||
font-family: Helvetica; | font-family: Helvetica; | ||
font-weight: 500; | font-weight: 500; | ||
− | color: | + | color:#000; |
} | } | ||
#pic_illustration { | #pic_illustration { | ||
font-size: 15px; | font-size: 15px; | ||
width: 80%; | width: 80%; | ||
− | |||
margin-left: 10%; | margin-left: 10%; | ||
} | } | ||
Line 1,357: | Line 1,382: | ||
.list_txt { | .list_txt { | ||
− | + | padding:0px 30px 10px 20px; | |
} | } | ||
.list_txt ul li{ | .list_txt ul li{ | ||
− | + | list-style-image:none; | |
} | } | ||
Line 1,380: | Line 1,405: | ||
.grid_6 { width: 49%; } | .grid_6 { width: 49%; } | ||
.grid_7 { width: 57.5%; } | .grid_7 { width: 57.5%; } | ||
− | .grid_8 { width: 94%; | + | .grid_8 { width: 94%; font-family: Verdana,Arial ; |
} | } | ||
.grid_9 { width: 74.5%; } | .grid_9 { width: 74.5%; } | ||
Line 1,399: | Line 1,424: | ||
.grid_11, | .grid_11, | ||
.grid_12 { | .grid_12 { | ||
− | + | margin:20px 0 0 0; | |
− | + | float: left; | |
− | + | display: block; | |
} | } | ||
− | .alpha | + | .alpha {margin-left:0;} |
− | .omega | + | .omega {margin-right:0;} |
− | .gallery-list | + | .gallery-list {margin:0;padding:0;} |
.little_respond {display:none;} | .little_respond {display:none;} | ||
.container{ | .container{ | ||
− | + | width: 100%; | |
− | + | max-width: 1000px; | |
− | + | margin: auto; | |
} | } | ||
Line 1,422: | Line 1,447: | ||
@media (orientation: portrait) { | @media (orientation: portrait) { | ||
− | + | .slide{background-attachment: scroll;background-position:0 0 !important; | |
− | + | } | |
} | } | ||
@media only screen and (min-width: 321px) and (max-width: 980px) { | @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: 670px;left: 13px;right: 8px;} | |
− | + | .gallery-container {width: 80%;margin: 60px 0px 30px 100px;display: block;} | |
− | + | .gallery-items {width: 800px; margin-left: 71px !important;}.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;} | |
− | + | #RightContentText 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;} | |
− | + | .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;} | |
− | + | .owl-next {right: 50px;} | |
− | + | .owl-pagination{width: 90%;} | |
− | + | .owl-carousel .owl-wrapper-outer {width: 90%;} | |
− | + | .clear {display: block;height: 30px;} | |
− | + | #RightContentText h3 {padding:0px 0 12px 0;font-size: 20px;} | |
− | + | #pic_title {font-size: 15px;} | |
− | + | #pic_illustration {font-size: 12px;} | |
− | + | .blockWords { font-size: 17px; } | |
− | + | ||
+ | /* | ||
@media only screen and (min-width: 970px) and (max-width: 980px) { | @media only screen and (min-width: 970px) and (max-width: 980px) { | ||
− | + | .gallery-list {display: none;} | |
} | } | ||
+ | */ | ||
</style> | </style> | ||
</html> | </html> |
Latest revision as of 19:48, 17 September 2015