
#slider001 { position: relative; margin: 0 auto; }
#slider001 .slides li { position: relative; overflow: hidden; }
#slider001 .slides li img { width: 100%; }
#slider001 .flex-control-nav { position: absolute; left: 0; bottom: 20px; text-align: center; width: 100%; z-index: 5; }
#slider001 .flex-control-nav li { display: inline-block; margin: 0 9px; }
#slider001 .flex-control-nav li a { display: inline-block; width: 8px; height: 8px; font-size: 0; background: rgba(255,255,255,0.3); border-radius: 15px; box-shadow: 2px 2px 2px #686767; }
#slider001 .flex-control-nav li a.flex-active { background: #fff; }







.mainBox02 { margin: 0 auto; padding: 40px 50px 110px; background: #1b1f28; }
.tabCon .tab { text-align: center; overflow: hidden; }
.tabCon .tab a { display: inline-block; font-size: 16px; color: #a1a8b0; }
.tabCon .tab a.on { color: #62E0F9; }
.tabCon .tab a+a { margin-left: 25px; }
.tabCon .con { margin-top: 30px; display: none; position: relative; }
.tabCon .con.on { display: block; }
.mainBox02_more { color: #666; display: block; }




.m2_slider { position: relative; margin: 0 auto; box-shadow: 10px 10px 0px #5d5d62; }
.m2_slider .flex-viewport { box-shadow: 5px 5px 0px #88878b; }
.m2_slider .slides li { position: relative; }
.m2_slider .slides a { display: block; }
.m2_slider .slides li img { width: 100%; }
.m2_slider .flex-control-nav { position: absolute; left: 0; bottom: 160px; text-align: center; width: 100%; z-index: 5; }
.m2_slider .flex-control-nav li { display: inline-block; margin: 0 2vw; }
.m2_slider .flex-control-nav li a { display: inline-block; width: 8px; height: 8px; font-size: 0; background: rgba(255,255,255,0.3); border-radius: 15px; }
.m2_slider .flex-control-nav li a.flex-active { background: #fff; }
.m2_slider .slides .beer_tit { background: #fff; padding: 40px 45px; }
.m2_slider .slides .beer_tit h3 { font-size: 36px; color: #4f4d58; font-weight: normal; }
.m2_slider .slides .beer_tit p { font-size: 22px; color: #828283; margin: 25px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.m2_slider .slides .beer_tit del { font-size: 15px; color: #c1c1c1; }
.m2_slider .slides .beer_tit i { margin-right: 5px; font-style: normal; font-size: 22px; color: #62E0F9; }
.m2_slider .slides .beer_tit b { font-size: 32px; color: #62E0F9; }
.mainBox02 .seeMore { display: block; font-size: 30px; color: #fff; font-weight: bold; background: #62E0F9; height: 104px; line-height: 104px; text-align: center; margin-top: 130px; box-shadow: 0px 20px 20px -8px rgba(11,186,191,0.6); }




.mainBox03 { background: #fff; padding: 45px 20px 90px; }
.mainBox03 .tit { text-align: center; font-size: 32px; color: #1b1f28; font-weight: bold; }
.mainBox03 ul { margin-left: -20px; }
.mainBox03 ul li { float: left; margin-left: 20px; margin-top: 30px; width: calc(50% - 20px); }
.mainBox03 ul li img { width: 100%; }
.mainBox03 ul li p { font-size: 22px; color: #4f4d58; margin: 20px 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mainBox03 ul li span { font-size: 22px; color: #62E0F9; }
.mainBox03 ul li span b { font-size: 28px; color: #62E0F9; }
.mainBox03 ul li span del { color: #c1c1c1; }
.mainBox03 ul li span i { margin-right: 5px; font-style: normal; }
.mainBox03 .seeMore { display: block; width: 90%; font-size: 30px; color: #fff; font-weight: bold; background: #62E0F9; height: 104px; line-height: 104px; text-align: center; margin: 60px auto 0; box-shadow: 0px 20px 20px -8px rgba(11,186,191,0.6); border-radius: 100px;  }


.mainBox04 { position: relative; height: 45vh; padding-top: 5vh; background: url(../images/mainBox4_img.jpg) no-repeat center top; -webkit-background-size: 100% 100%; background-size: 100% 100%; text-align: center; }
.mainBox04 a { display: inline-block; width: 25%; font-size: 24px; color: #fff; padding: 20px 0; text-align: center; background: #1b1f28; border-radius: 100px; box-shadow: 0px 20px 65px -10px #fff; margin-top: 15px; }
.mainBox04 img { width: 55%; opacity: 0; }
.mainBox04 img.active { animation: mainBox04 1s ; animation-delay: 0.5s; animation-fill-mode:forwards; -webkit-animation-fill-mode:forwards; transform: scale(0.1); opacity: 0; transition: all 1s; }

@keyframes mainBox04 {
	0% {transform: translateY(-100px); opacity: 0;}
	100% {transform: translateY(0); opacity: 1;}
}