css style.css文件
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css style.css文件相关的知识,希望对你有一定的参考价值。
/* ADAPTIVE */
@media screen and (max-width: 1600px){
.mountain{
overflow: hidden;
width: 100%;
}
.mountain img{
min-height: 100%;
width: 1600px;
}
.mountain-scene{
overflow: hidden;
width: 100%;
}
.mountain-scene > .parallax-viewport{
width: 1600px;
min-height: 100%;
background-size: 100%;
-webkit-background-size: 100%;
}
}
@media screen and (max-width: 1400px){
footer.wrapper{
flex-wrap: nowrap;
}
footer .f-menu-out{
width:
}
footer .f-menu-wrapper{
width: 50%;
flex: none;
margin-right: 0px;
margin-bottom: 30px;
}
}
@media screen and (max-width: 1260px){
.main-menu{
padding: 0 32px;
}
.maintop .logo{
padding: 15px;
height: 100%;
display: flex;
display: -webkit-flex;
display: -webkit-box-flex;
display: -ms-flex;
align-items: center;
}
.maintop .mainmenu-wrapper{
height: auto;
}
}
@media screen and (max-width: 1110px){
.maintop .wrapper{
display: block;
}
.maintop .logo{
display: inline-block;
}
.top-swiper-container .swiper-inner-wrapper{
max-width: auto;
padding: 0 30px;
}
.top-swiper-container .name{
width: 100%;
}
.top-swiper-container .detail-text{
width: 100%;
}
.info-links .wrapper .links-wrapper h2{
font-size: 180%;
}
.info-links .wrapper .links-wrapper ul > li > a{
font-size: 14px;
}
}
@media screen and (max-width: 940px){
.info-links .wrapper{
display: block;
}
.info-links .wrapper .links-wrapper{
width: 100%;
margin-bottom: 30px;
}
.info-links .wrapper .links-wrapper .fake-first,
.info-links .wrapper .links-wrapper .fake-last{
display: none;
}
.info-links{
margin-bottom: 50px;
}
.best-promotion{
background-size: cover;
padding: 30px;
font-size: 16px;
}
.best-promotion h2{
font-size: 180%;
font-weight: 200;
}
.main-calendar .addevent{
position: relative;
left: auto;
top: auto;
right: auto;
bottom: auto;
margin: auto auto 30px 18px;
}
.main-calendar .grabline{
width: 91%;
}
.main-calendar{
padding: 30px;
font-size: 16px;
}
.main-calendar h2{
font-size: 180%;
font-weight: 200;
}
.event-swiper-container{
margin-right: auto;
}
.advantages{
padding: 30px;
font-size: 16px;
}
.advantages h2{
font-size: 180%;
font-weight: 200;
}
.advantages .btns{
display: block;
}
.advantages .btns > a{
width: 100%;
border-right: none;
border-bottom: 1px solid #FFF;
}
.advantages .btns > a:last-child{
border-bottom: none;
}
.main-news{
padding: 30px;
font-size: 16px;
}
.main-news h2{
font-size: 180%;
font-weight: 200;
}
.main-news .news-swiper-container .swiper-slide{
width: 100%;
}
.main-partners{
padding: 30px;
font-size: 16px;
}
.main-partners h2{
font-size: 180%;
font-weight: 200;
}
footer .f-menu-wrapper{
text-align: center;
}
footer.wrapper{
flex-wrap: wrap;
}
}
@media screen and (max-width: 800px){
.maintop .mainmenu-wrapper .main-menu-inner .hamburger-toggle{
display: inline-block;
color: #fff;
border: none;
line-height: 50px;
height: 50px;
background: url('images/menu-hamburger.png') 26px center no-repeat;
padding-left: 50px;
padding-right: 26px;
}
.maintop .mainmenu-wrapper .main-menu-inner > ul{
display: block;
background-color: #1b2630;
position: absolute;
overflow: hidden;
left: -100vw;
height: 100vh;
width: 100%;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
line-height: 38px;
padding: 0;
font-size: 16px;
font-family: "SegoeUIRegular", sans-serif;
color: #c4c5c6;
transition: 0.5s;
}
.maintop .mainmenu-wrapper .main-menu-inner > ul.active{
left: 0;
}
.maintop .mainmenu-wrapper .main-menu-inner > ul > li {
/*height: 40px;*/
}
.maintop .mainmenu-wrapper .main-menu-inner > ul > li > a {
border-bottom-color: transparent;
padding: 0 18px;
width: 100%;
height: 100%;
line-height: 40px;
}
.main-menu > li.parent > span {
background: url('images/right-arrow.png') center no-repeat;
position: absolute;
top: 50%;
right: 0px;
transform: rotate(360deg) translateY(-50%);
width: 40px;
height: 39px;
border-left: 1px solid #42474d;
/*border-bottom: 1px solid #42474d;*/
border-radius: 0;
margin: 0;
}
.main-menu > li.parent > span:hover {
background-color: #000;
}
.main-menu > li.parent > span::before {
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
.main-menu > li.parent > span::before:hover {
background-color: #000;
}
.main-menu > li.parent > span.open {
background-image: url(images/close-menu.png);
top: 50%;
transform: translateY(-50%);
}
.main-menu > li.parent > ul {
display: block;
opacity: 1.0;
background-color: #000;
left: -100vw;
height: 100vh;
min-height: 100vh;
line-height: 38px;
padding: 0;
font-size: 16px;
font-family: 'SegoeUIRegular', sans-serif;
color: #c4c5c6;
top: 40px;
width: 100%;
transition: 0.5s;
}
.main-menu > li.parent > ul.open {
left: 0;
transition: 0.5s;
}
.main-menu > li > ul > li {
margin-bottom: 0;
max-width: none;
}
.main-menu > li > ul > li > a {
display: block;
color: #c5c5c5;
white-space: normal;
font-size: 15px;
border-bottom-color: transparent;
padding: 10px 18px;
width: 100%;
height: 100%;
/*line-height: 40px;*/
}
.main-menu > li > ul > li > a:hover {
border-bottom-color: transparent;
}
}
@media screen and (max-width: 750px){
.wrapper{
padding-left: 18px;
padding-right: 18px;
}
.top-swiper-container .swiper-inner-wrapper{
padding: 0 18px;
}
.topline .toggle-link{
display: block;
}
.topline .topmenu{
position: absolute;
display: block;
top: 35px;
background: #000;
z-index: 50;
height: 100vh;
left: -100vw;
}
.topline .topmenu > li{
display: block;
}
.topline .topmenu > li.city{
background-position: 18px center;
}
.topline .topmenu > li > a{
display: block;
line-height: 38px;
padding: 0 18px;
font-size: 16px;
font-family: 'SegoeUIRegular';
border: none;
}
.topline .phones{
margin-left: auto;
}
.topline.open .topmenu{
left: 0px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.topline.open .overflow-block{
display: block;
opacity: 1;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
footer {
display: block;
}
footer .f-menu-out{
display: block;
}
footer .f-menu-wrapper{
flex: 0;
white-space: normal;
width: 100%;
}
footer .contacts{
text-align: center;
max-width: none;
}
.f-copyright .wrapper{
display: block;
text-align: center;
}
.f-copyright .wrapper > *{
text-align: center !important;
margin-bottom: 18px;
}
}
@media screen and (max-width: 640px){
.maintop .wrapper{
display: block;
}
.maintop .logo{
display: block;
text-align: center;
padding: 18px;
margin-right: -18px;
margin-left: -18px;
margin-bottom: 18px;
}
footer{
display: block;
}
.maintop .button.white{
padding: 0 18px;
}
.maintop .mainmenu-wrapper .main-menu-inner .hamburger-toggle{
padding-left: 26px;
background-position: left center;
}
.top-swiper-container .name{
font-size: 160%;
}
.top-swiper-container .detail-text{
margin-top: 18px;
}
.event-swiper-container::after{
display: none;
}
}
.main-container-block {
margin: 40px auto 0 auto;
max-width: 1340px;
min-height: 840px;
background-color: #fff;
border-radius: 3px;
padding: 75px;
display: flex;
overflow: hidden;
}
.main-container-block h2:first-child {
margin-top: 0px;
}
.main-container-block h2 {
margin-bottom: 10px;
}
.main-container-block h3 {
font-size: 25px;
margin: 15px 0;
font-family: 'Segoe UI', Arial, sans-serif;
}
.main-container-block h3:first-child {
margin-top: 0;
}
.main-container-block h3:last-child {
margin-bottom: 0;
}
.main-container-block h4 {
font-size: 150%;
}
.main-container-block b,
.main-container-block strong {
font-weight: bold;
}
.main-container-block i {
font-style: italic;
}
.main-container-block p {
margin: 10px 0;
}
.main-container-block p:first-child {
margin-top: 0;
}
.main-container-block p:last-child {
margin-bottom: 0;
}
.main-container-block__content {
padding-left: 75px;
width: 100%;
height: 100%;
}
.main-container-block-menu {
padding-right: 75px;
position: relative;
min-width: 285px;
max-width: 285px;
}
.main-container-block-line-decorate {
width: 1px;
height: 100%;
background-color: #e0e0e0;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 1px;
}
.main-container-block-menu,
.main-container-block__content {
display: inline-block;
}
.main-container-block-menu__title {
margin-bottom: 10px;
}
.main-container-block-menu__title {
color: #b7b7b7;
}
@media screen and (max-width: 1000px) {
.main-container-block {
padding-left: 15px;
padding-right: 15px;
}
.main-container-block__content {
padding-left: 15px;
}
.main-container-block-menu {
padding-right: 15px;
}
}
@media screen and (max-width: 600px) {
.main-container-block {
flex-direction: column;
padding-top: 20px;
padding-bottom: 20px;
}
.main-container-block-menu {
width: 100%;
margin: 0 auto;
}
.main-container-block-menu__title, .main-container-block-menu__title + ul li {
text-align: center;
}
.main-container-block-line-decorate {
width: 500%;
height: 1px;
right: 0;
bottom: -1px;
top: 100%;
transform: none;
left: -104px;
}
}
#mapzone {
width: 100%;
height: 300px;
margin-bottom: 50px;
}
#mapzone svg {
/*display: flex;*/
width: 100%;
height: 100%;
}
#mapzone image {
cursor: pointer;
opacity: 0.3;
}
.form_preloader {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(255,255,255,0.8) url(images/loader.gif) center no-repeat;
z-index: 100;
display: none;
}
.contact-name {
/*display: flex;*/
width: 103%;
height: auto;
border-radius: 3px;
margin-bottom: 5px;
margin-left: -3%;
align-items:center;
background-color: #446983;
min-height:72px;
padding: 16px 10px;
font-size: 14pt;
color: #fff;
}
.contact-name .address {
font-weight: bold;
color: #fff;
font-size: 10pt;
}
.slider_partners_link {
border-bottom: none;
}
.partner-wrapper {
display: block;
}
.partners-elem {
display: flex;
align-items:center;
margin-bottom: 50px;
}
.partner-wrapper-img {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: 240px;
max-width: 240px;
min-height: 55px;
max-height: 55px;
overflow: hidden;
margin-right: 10px;
}
.partner-wrapper-img-slide {
display: flex;
justify-content: flex-start;
align-items: center;
min-width: 240px;
max-width: 240px;
min-height: 55px;
max-height: 55px;
overflow: hidden;
}
.partner-name-link {
display: inline;
}
@media screen and (max-width: 600px){
.partners-elem {
display: block;
text-align: start;
}
.partner-wrapper-img {
margin-right: 0px;
margin-bottom: 10px;
}
}
.city-select option {
color: #000;
}
.ui-label-value {
text-transform: uppercase;
font-size: 12px;
color: #1e6345;
line-height: 14px;
margin-bottom: 8px;
font-weight: bold;
margin-top: 16px;
}
.ui-form .ui-form-item input[type=text], .ui-form .ui-form-item select {
color: #000;
padding: 20px;
display: block;
font-size: 16px;
font-family: 'Segoe UI', Arial, sans-serif;
width: 100%;
max-width: 450px;
border-radius: 3px;
border: 1px solid #e8e8e8;
background: #fff;
}
.ui-form .ui-form-item option {
border-bottom: 1px solid #e8e8e8;
background: #fff;
padding: 20px;
}
.ui-form .ui-form-item option[selected] {
background: #c4c4c4;
}
.ui-form .ui-form-item option:last-child {
border-bottom: none;
}
.form-error {
color: #aa2d30;
font-size: 14px;
font-family: 'Segoe UI', Arial, sans-serif;
}
.ui-form .ui-form-item input[type=text] {
background: #fff;
}
.ui-form .ui-form-item input[type=text]:focus,
.ui-form .ui-form-item select:focus {
border: 1px solid #000;
}
.ui-form .ui-form-item label {
display: block;
position: relative;
}
.ui-group-title {
padding: 12px 14px;
border: 1px solid #72b5ca;
text-transform: uppercase;
background-color: #a1e5ed;
margin-bottom: 15px;
}
.submit .button.right {
margin-top: 15px;
}
@media screen and (max-width: 400px) {
.rc-anchor-normal {
width: 150px;
}
.submit .button.right {
display: block;
width: 205px;
margin: 0 auto;
margin-top: 15px;
font-size: 80%;
padding: 0 5px;
float: none;
}
.rc-anchor.rc-anchor-normal.rc-anchor-light {
width: 150px;
}
.main-container-block__content {
padding-left: 0px;
}
}
@media screen and (max-width: 600px) {
.events-btns {
margin-top: 10px;
}
}
@media screen and (max-width: 360px) {
.main-container-block-menu {
padding-right: 75px;
}
}
以上是关于css style.css文件的主要内容,如果未能解决你的问题,请参考以下文章