@charset "utf-8";

#wrap {position:relative; padding-top:0}

.mainVisArea {position:relative; width:100%; height:auto; overflow:hidden; margin-top:200px; text-align:center; z-index:10}
.mainVisArea .swiper-wrapper .swiper-slide {display:block; position:relative; width:100%; height:600px; background-position:50% 0;background-repeat:no-repeat;background-size:cover; display:flex; justify-content:center; flex-wrap:wrap}
.mainVisArea .swiper-wrapper .swiper-slide .__m {display:none}

.mainVisArea .swiper-pagination {display:inline-block; padding:15px 65px 15px 31px;  width:auto; height:11px; left:50%; bottom:30px; background:rgba(0,0,0,0.5); overflow:hidden; border-radius:20.5px; -ms-transform:translate(-50%, 0); -webkit-transform:translate(-50%, 0); -moz-transform:translate(-50%, 0); -o-transform:translate(-50%, 0); transform:translate(-50%, 0);}
.mainVisArea .swiper-pagination .swiper-pagination-bullet {vertical-align:top; width:11px; height:11px; margin:0 0 0 10px; background:url("/images/main/imgRoll_indi.png") no-repeat 50% 50%;}
.mainVisArea .swiper-pagination .swiper-pagination-bullet:first-child {margin:0;}
.mainVisArea .swiper-pagination .swiper-pagination-bullet-active {background:url("/images/main/imgRoll_indi_on.png") no-repeat 50% 50%;}
.mainVisArea .swiper-pagination .playBtn {display:block; width:41px; height:41px; position:absolute; top:0; right:0; background:rgba(0,0,0,0.2) url("/images/main/play_bt.png") no-repeat 50% 50%; border-radius:20.5px;}
.mainVisArea .swiper-pagination .playBtn.on {background:rgba(0,0,0,0.2) url("/images/main/play_bt_on.png") no-repeat 50% 50%;}


.container {clear:both; max-width:1400px; width:100%; margin:0 auto; position:relative; font-size:0; letter-spacing:-0.5px; padding:70px 0; box-sizing:border-box}
.container h2 {font-family: 'Paperozi'; font-size:35px; margin-bottom:30px; font-weight:800; position:relative}

.d_link {display:flex; flex-wrap:wrap; margin-bottom:80px}
.d_link a {width:16.666%; box-sizing:border-box; text-align:center}
.d_link a p {margin-top:20px; font-size:20px; line-height:1.3}


.notice {width:72.85%; display:inline-block; box-sizing:border-box; position:relative; vertical-align:top; height:400px}
.notice h2 {position:absolute; left:0}
.notice > ul {text-align:left; padding-left:180px; position:relative; font-size:0}
.notice > ul > li {display:inline-block; vertical-align:top; width:160px}
.notice > ul > li+li {margin-left:5px}
.notice > ul > li > a {font-family: 'Paperozi'; font-size:23px; background:#fff; border:#dbdbdb solid 1px; border-radius:30px; padding:10px 0; display:block; text-align:center; font-weight:500}
.notice > ul > li.active > a {color:#0177c1; border-color:#0177c1}
.notice > ul > li:not(.active) > div {display:none}
.notice > ul > li > div {position:absolute; top:80px; left:0; display:block; width:100%; box-sizing:border-box; background:#ebf4fa; padding:40px; border-radius:20px}
.notice > ul > li > div p {display:block; position:relative; padding:25px 0 0 150px; box-sizing:border-box; height:120px; margin-bottom:40px}
.notice > ul > li > div p label {position:absolute; top:0; left:0; font-size:12px; width:125px; height:120px; background:#0177c1; border-radius:20px; text-align:center; display:block; box-sizing:border-box; padding:30px; color:#fff}
.notice > ul > li > div p label strong {display:block; font-size:45px; font-weight:900; margin-bottom:10px}
.notice > ul > li > div p a {font-size:20px; font-weight:600; width:100%; text-overflow: ellipsis; white-space:nowrap; overflow:hidden; display:block}
.notice > ul > li > div p span {display:block; font-size:18px; font-weight:300; color:#888; margin-top:20px; line-height:1.3; text-overflow:ellipsis; overflow:hidden; height:46px}
.notice > ul > li:not(.active) > div {display:none}
.notice > ul > li > div > ul {display:block}
.notice > ul > li > div > ul > li {position:relative; box-sizing:border-box; padding-left:20px; display:flex}
.notice > ul > li > div > ul > li:before {content:''; width:5px; height:5px; border-radius:50%; background:#5781d7; position:absolute; left:0; top:50%; transform:translateY(-50%)}
.notice > ul > li > div > ul > li+li {margin-top:30px}
.notice > ul > li > div > ul > li > a {text-overflow: ellipsis; white-space:nowrap; overflow:hidden; display:block; font-size:20px; width:calc(100% - 100px)}
.notice > ul > li > div > ul > li span {font-size:17px; color:#999; position:absolute; right:0}
.notice a.btn_more {position:absolute; top:-70px; right:0; font-size:18px}

.food {width:calc(27.15% - 40px); display:inline-block; position:relative; margin-left:40px}
.food .btn_more {position:absolute; right:0; top:0}
.food > div {background:#0177c1; border-radius:30px; padding:20px 30px 30px 30px; position:relative}
.food > div span {display:block; font-family: 'Paperozi'; text-align:center; color:#fff; font-size:25px; font-weight:700}
.food > div p {background:#fff; padding:15px; text-align:center; font-size:20px; font-weight:500; line-height:1.8; border-radius:10px; margin-top:20px}

.photo {position:relative; box-sizing:border-box; display:block; margin-top:80px}
.photo .btn_box {display:flex; align-items:center; position:absolute; right:0; top:0}
.photo button {width:42px; height:42px; font-size:0; margin-right:10px}
.photo button.prev {background:url('/images/main/btn_prev.png') no-repeat}
.photo button.next {background:url('/images/main/btn_next.png') no-repeat}
.photo .swiper-container {overflow:hidden; display:flex; padding:10px}
.photo .swiper-container a {font-size:16px; display:inline-block; position:relative; box-sizing:border-box}
.photo .swiper-container a div.img {overflow:hidden; border-radius:50px 50px 50px 0; height:270px; box-shadow:0 0 5px 3px rgba(0,0,0,0.1)}
.photo .swiper-container a div.img img {width:100%; height:100%; object-fit:cover; object-position:50% 0}
.photo .swiper-container a p {text-align:center; margin-top:20px; font-size:20px; word-break:keep-all; line-height:1.3}

.main_banner {margin-bottom:50px; box-sizing:border-box}
.main_banner .inner_box {position:relative; max-width:1400px; margin:0 auto; padding-left:200px; box-sizing:border-box; overflow:hidden}
.main_banner h2 {font-size:24px; text-align:left; position:absolute; left:0; top:50%; transform:translateY(-50%); font-weight:700}
.main_banner .banners {width:100%; padding:0 2px; box-sizing:border-box; overflow:hidden}
.main_banner .banners a img {max-width:100%; /*border:#dbdbdb solid 1px; border-radius:5px*/}
.main_banner .banners .swiper-slide {display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -ms-flex-pack:center; -webkit-justify-content:center; justify-content:center; -webkit-box-align:center; -ms-flex-align:center; -webkit-align-items:center; align-items:center}
.main_banner .btn {position:absolute; bottom:17px; left:100px; font-size:0}
.main_banner .btn li {display:inline-block; margin-left:-1px}
.main_banner .btn li.cnt {font-size:14px; line-height:22px; margin-right:10px; vertical-align:middle; margin-left:0}
.main_banner .btn li button {width:22px; height:22px; display:block; font-size:0; background:#fff url('/images/main/btn_banner.png') no-repeat; border:1px solid #999; box-sizing:border-box; background-position:0 1px}
.main_banner .btn li button.next {background-position:-43px 1px;}
.main_banner .btn li button.play {background-position:-58px 0; display:none}
.main_banner .btn li button.pause {background-position:-21px 0; display:none; width:23px}
.main_banner .btn li button.play.on,
.main_banner .btn li button.pause.on {display:inline-block}



@media all and (max-width:1400px){
	
	.mainVisArea {border-radius:0; margin-top:169px}
	
	.container {padding:70px 10px; box-sizing:border-box}	
	.main_banner {padding:0 10px}
	
	.notice {width:100%; margin-bottom:50px}
	.food {margin-left:0; width:100%; margin-top:50px}

}

@media all and (max-width:1200px){
		
	.mainVisArea {width:100%; margin-top:80px}
	
}

@media all and (max-width:1024px){
	
	.photo .swiper-container a div.img {height:auto}
	.photo .swiper-container a div.img img {height:auto; min-height:auto}
	
}

@media all and (max-width:960px){
	
	.d_link {flex-wrap:wrap}
	.d_link a {width:33.333%}
	.d_link a:nth-child(n+4) {margin-top:30px}
	
	.notice {height:450px}
	.notice a.btn_more {top:-50px}
	.notice > ul {padding-left:0; padding-top:60px}
	.notice > ul > li {width:140px}
	.notice > ul > li > a {font-size:18px}
	.notice > ul > li > div {top:120px}
	
}


@media all and (max-width:768px){
	
	.mainVisArea .swiper-wrapper .swiper-slide {height:auto !important}
	.mainVisArea .swiper-wrapper .swiper-slide .__m {display:block}

}

@media all and (max-width:690px){
	
	.notice a.btn_more {top:-110px}
	
}

@media all and (max-width:640px){
	
	.container {padding:30px 20px}
	.container h2 {font-size:25px; margin-bottom:20px}
	
	.section3 .container {padding-top:0}
	
	.d_link a p {font-size:18px}
	
	.notice {height:430px}
	.notice a.btn_more {top:-150px}
	.notice > ul {padding-right:20px; padding-top:50px}
	.notice > ul > li > div {top:150px; padding:35px}
	.notice > ul > li:nth-child(4) {margin-left:0; margin-top:5px}
	.notice > ul > li > div p label {width:105px; height:100px; padding:20px}
	.notice > ul > li > div p {padding:22px 0 0 135px; margin-bottom:20px}
	.notice > ul > li > div p label strong {font-size:35px}
	.notice > ul > li > div > ul > li > a {font-size:18px}
	.notice > ul > li > div > ul > li span {font-size:15px}
	
	.food > div {border-radius:15px}
	.food > div span {font-size:23px}
	.food > div p {font-size:18px}
	 
	.photo {margin-bottom:30px; margin-top:60px}
	.photo button {width:30px; height:30px; margin-right:5px}
	.photo button.prev {background-size:30px}
	.photo button.next {background-size:30px}
	.photo .btn_more2 img {width:30px}
	.photo .swiper-container {padding:0}
	
	a.btn_more img {width:30px}
	
	.main_banner {margin-bottom:30px}
	.main_banner .inner_box {padding-left:0}
	.main_banner h2 {font-size:20px; position:relative; left:auto; top:auto; transform:none; margin-bottom:10px}
	.main_banner .btn {bottom:auto; left:auto; top:0; right:0}
}


@media all and (max-width:504px){
	
	.d_link a {width:50%}
	.d_link a:nth-child(n+3) {margin-top:20px}
	.d_link a p {margin-top:17px}
	
	.notice {height:420px}
	.notice > ul {padding-right:30px}
	.notice > ul > li:nth-child(3) {margin-left:0; margin-top:5px}
	.notice > ul > li:nth-child(4) {margin-left:5px}
	.notice > ul > li > div {padding:30px}
	.notice > ul > li > div p {padding:14px 0 0 130px}
	
}

@media all and (max-width:370px){
	
	.notice > ul {padding-right:0}

}