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文件的主要内容,如果未能解决你的问题,请参考以下文章

css style.css文件

css style.css文件

css style.css文件

css style.css文件

css style.css文件

css style.css文件