#container{overflow:hidden;}

/* visual */
.area_visual{overflow: hidden;position:relative;padding: 40px 0;background: #f8f8f8;}
.area_visual .gallery_top{width:1200px; overflow:visible;}
.gallery_top .swiper-slide img{width:100%;}
.gallery_top .swiper-button-white{margin-top:0; width:31px; height:52px; transform:translateY(-50%); transition:width 0.4s ease-in 0s;}
.gallery_top .swiper-button-prev{left:-70px;}
.gallery_top .swiper-button-prev:foucs,
.gallery_top .swiper-button-next:focus{outline:none;}
.gallery_top .swiper-button-next{right:-70px;}
.gallery_top .swiper-button-prev:after, 
.gallery_top .swiper-button-next:after{content:''; background:url(../../images/main/icon_rarrow.png)no-repeat center; background-size: 100%;width:33px; height:60px; text-indent:-9999px;}
.gallery_top .swiper-button-prev:after{background:url(../../images/main/icon_larrow.png)no-repeat center; background-size: 100%;}
.gallery_thumbs{position:absolute; left:0; right:0; bottom:30px; width:600px;}
.gallery_thumbs .swiper-slide{box-sizing:border-box; background:#fff; border-radius:100px; border:1px solid #eee; text-align:center; cursor:pointer;} 
.gallery_thumbs .swiper-slide img{height:58px;}
.area_visual .swiper-pagination{display:flex; align-items: center; justify-content: center; margin-top:40px;}
.swiper-pagination-bullet:focus{outline:none;}
.swiper-pagination{position:static}
.swiper-pagination-bullet-active{background:none; border:3px solid #111}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet{margin:0 6px;}

/* mainvideo */
.area_video{overflow:hidden; margin:60px 0 60px 0; text-align:center;}
.area_video h2{margin-bottom:25px; font-size:36px; color:#111;}
.area_video ul{display:flex; justify-content: space-between; flex-wrap: wrap;}
.area_video ul li{position:relative; width:32%; margin-bottom:20px;}
.area_video ul li > div{overflow:hidden; position:relative; width:100%; padding-top:55%; text-align:center;}
.area_video ul li > div img{position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%); transition:all 0.5s ease-out 0s;}
.area_video ul li p{font-weight:bold; color:#111; margin-top:10px;}
.icon_new{z-index: 9; position: absolute; left: 0; top: -5px; width:53px; height: 30px; background:url(../../images/main/icon_new.svg) no-repeat; background-size:100%;}
.icon_new i{color:#fff; font-size:13px; animation: Blink 1s infinite; -webkit-animation: Blink 1s infinite;}
@-webkit-keyframes Blink {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes Blink {
    from {opacity: 0;}
    to {opacity: 1;}
}
/* mainmenu */
.area_mainmenu{overflow:hidden; margin:60px 0 80px 0; text-align:center;}
.area_mainmenu h2{margin-bottom:25px; font-size:36px; color:#111;}
.area_mainmenu ul{overflow:hidden; border:1px solid #e3e3e3; }
.area_mainmenu ul li{box-sizing:border-box; float:left; width:25%; border-left:1px solid #e3e3e3}
.area_mainmenu ul li:first-child{border-left:0}
.area_mainmenu ul li:nth-child(2n){}
.area_mainmenu ul li.icon01 a .img{width:65px; height:55px; margin:0 auto; background:url(../../images/main/icon_main01.svg) center; background-size:100%;}
.area_mainmenu ul li.icon02 a .img{width:60px; height:55px; margin:0 auto; background:url(../../images/main/icon_main02.svg) center; background-size:100%;}
.area_mainmenu ul li.icon03 a .img{width:65px; height:55px; margin:0 auto; background:url(../../images/main/icon_main03.svg) center; background-size:100%;}
.area_mainmenu ul li.icon04 a .img{width:58px; height:55px; margin:0 auto; background:url(../../images/main/icon_main04.svg) center; background-size:100%;}
.area_mainmenu ul li p{margin-top:20px; font-size:19px; font-weight:700; color:#333;}
.area_mainmenu ul li > a{display:block; width:100%; height:100%; padding:40px 0; transition:0.5s}
.area_mainmenu ul li > a:hover{background:#2278e7;transition:0.5s}
.area_mainmenu ul li > a:hover p{color:#fff}
.area_mainmenu ul li.icon01 a:hover .img{width:65px; height:55px; margin:0 auto; background:url(../../images/main/icon_main01_w.svg) center; background-size:100%;}
.area_mainmenu ul li.icon02 a:hover .img{width:60px; height:55px; margin:0 auto; background:url(../../images/main/icon_main02_w.svg) center; background-size:100%;}
.area_mainmenu ul li.icon03 a:hover .img{width:65px; height:55px; margin:0 auto; background:url(../../images/main/icon_main03_w.svg) center; background-size:100%;}
.area_mainmenu ul li.icon04 a:hover .img{width:58px; height:55px; margin:0 auto; background:url(../../images/main/icon_main04_w.svg) center; background-size:100%;}


/* event */
.area_event{overflow:hidden; padding:100px 0; background:url(../../images/main/img_event_bg.jpg) no-repeat; background-size:cover;}
.area_event .txt{float:left; padding-top:40px; color:#fff;}
.area_event .txt ul li{margin-bottom:7px;}
.area_event .txt h2{margin-bottom:25px; font-size:36px;}
.area_event .txt h3{margin-bottom:15px; font-size:25px;}
.area_event .txt span{display:inline-block; width:170px; margin-top:30px;}
.area_event .txt span a{position:relative; display:block; width:100%; padding-bottom:7px; border-bottom:2px solid #fff; color:#fff; font-size:16px;}
.area_event .txt span a:before{content:''; position:absolute; right:0; top:50%; width:10px; height:2px; margin-top:-1px; background:#fff;}
.area_event .txt span a:after{content:''; position:absolute; right:4px; top:50%; width:2px; height:10px; margin-top:-5px; background:#fff;}

.area_event .img{float:right; width:625px; height:420px;}
.area_event .tabs {overflow: hidden; margin-bottom:40px;}
.area_event .tabs li{float: left; overflow: hidden;position: relative; width:150px; text-align:center;}
.area_event .tabs li.active{background:#2278e7;}
.area_event .tabs li.active a{border-bottom:2px solid #2278e7}
.area_event .tabs > li > a{display: block; padding:10px; border-bottom:2px solid #fff; color: #fff; outline: none;}

.area_community{display:flex; justify-content: space-between; padding-top:100px;}
.area_community > div{width:48.5%;}
.area_community > div h2{position:relative; margin-bottom:25px; font-size:32px; color:#111;}
.area_community .notice ul{display:flex; justify-content: space-between;}
.area_community .notice h2 a{position:absolute; right:0; bottom:0; font-size:16px;}
.area_community .notice ul li{box-sizing:border-box; width:48%; height:325px; padding:50px 30px; border:1px solid #ddd;}
.area_community .notice ul li b{font-size:14px; color:#005295}
.area_community .notice ul li h3{line-height:1.5; display:-webkit-box; overflow:hidden; max-height:65px; height:65px; margin:20px 0 5px 0; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; color:#111; font-size:20px; word-break:keep-all;}
.area_community .notice ul li p{overflow:hidden; margin-bottom:50px; color:#444; white-space: nowrap; text-overflow: ellipsis;}
.area_community .notice ul li span{font-size:14px; color:#888}

.area_community .youtube .img{height:325px; background:#fef4f5 url(../../images/main/img_edu.jpg) no-repeat;}
.area_community .youtube .img a{display:block; width:100%; height:100%;}

.area_banner{margin:30px auto 100px auto}
.area_banner ul{display:flex; justify-content: space-between; }
.area_banner ul li{position:relative; width:48.5%; height:285px;}
.area_banner ul li:first-child{background:#2278e7 url(../../images/main/img_banner01.svg) no-repeat 10% 50%; background-size:205px 182px;}
.area_banner ul li:last-child{background:#f2f2f2 url(../../images/main/img_banner02.svg) no-repeat 10% 50%; background-size:225px 205px;}
.area_banner ul li a{display:block; width:100%; height:100%;}
.area_banner ul li a > div{position:absolute; width:45%; right:30px; top:50%; color:#fff;transform: translateY(-50%); word-break:keep-all;}
.area_banner ul li:last-child a > div{color:#222;}
.area_banner ul li a > div h2{margin-bottom:10px; font-size:30px;}

/* count */
.area_count {overflow: hidden; padding:80px 0;background:#f8f8f8;text-align:center;}
.area_count h2{font-size:32px; color:#111;}
.area_count h2 b{}
.area_count .tit_main{margin-bottom:40px;}
.dash .digit {position: relative;  line-height:155px; background: #2278e7; color: #fff;font-size:55pt;font-weight: 800;float: left; width:105px; height:155px; margin:0 4px; text-align: center; vertical-align:middle;}
.dash {position: relative; display: inline-block;padding: 0px 25px; text-align: center;}
.dash:after{content: ":"; line-height:155px; height:155px; display: block; font-weight: bold; font-size: 45px; color: #3b3b3b;  position: absolute; top: 0; right: -9px;}
.dash.seconds_dash:after{display:none;}
.dash_title{clear: both; display: block;padding-top:28px;text-align: center;color: #222; font-weight:500;}


@media screen and (max-width:1280px){
	.area_visual{padding:0; background:#fff; }
	.area_visual .gallery_top{width:100%;}
	.gallery_top .swiper-button-prev{left:20px; transform: translateY(-50%);}
	.gallery_top .swiper-button-next{right:20px; transform: translateY(-50%);}
	
	.area_event .img{width:50%;}

	.dash{width:auto;}
	.dash .digit{font-size:30px;}
	.dash .digit{line-heighT:105px; width:75px; height:105px;}
	.dash:after{line-height:105px; height:105px; }


}

@media screen and (max-width:1100px){
	.area_banner ul li:last-child{background-size: 175px 155px;}
	.area_banner ul li:first-child{background-size: 155px 140px;}
	.area_banner ul li a > div h2{font-size:25px;}

	.area_mainmenu #popLayer01 img{width:100%;}

	.area_community .youtube .img{background-size:cover; background-position:20% 50%;}
}

@media screen and (max-width:1024px){
	.area_main .cont{padding:40px;}
	.area_main .cont .info img{right:0}
	
	.area_event .txt{padding-top:0}
	.area_event .img{width:45%; height:350px;}

	[data-pop-layer="layer"] .popBox .popConts{margin-top:30px;}
	[data-pop-layer="layer"] .popBox .btn_close{width:50px; height:50px;}
	[data-pop-layer="layer"] .popBox .btn_close span{margin:-17px auto 0}

}

@media screen and (max-width:960px){
	.area_event .tabs li{width:140px;}	

	.dash{box-sizing:border-box; float:left; width:25%; padding:0 15px;}
	.dash:after{right:-4px}
	.dash .digit{width: -webkit-calc(50% - 5px);  width: calc(50% - 5px); margin:0 10px 0 0;}
	.dash .digit:nth-of-type(2){margin-right:0}

	.area_community > div h2{font-size:28px;}
}


@media screen and (max-width:860px){
	.area_main .cont .list ul li a > div{padding:20px 0}
	
	.area_event{text-align:center;}
	.area_event .txt{width:100%;}
	.area_event .tabs{width:420px; margin:30px auto;}
	.area_event .img{display:none;}

	.area_community{display:block; padding-top:60px;}
	.area_community > div{width:100%;}
	.area_community > .youtube{margin-top:40px;}

	.area_banner ul{display:block;}
	.area_banner ul li{width:100%;}
	.area_banner ul li a > div{right:auto; left:250px;}
}

@media screen and (max-width:767px){
	.gallery_top .swiper-button-prev:after,
	.gallery_top .swiper-button-next{display:none;}
	.area_visual .swiper-pagination{margin-top:15px;}

	.area_video h2,
	.area_community > div h2,
	.area_event .txt h2,
	.area_mainmenu h2{margin-bottom:15px; font-size:20px;}
	
	.area_count h2 b{display:block;}
	.area_count .tit_main{margin-bottom:15px;}

	.area_count{padding: 40px 0 60px 0;}
	.dash .digit{line-height:75px; height:75px; font-size:20px;}
	.dash:after{line-height:75px; height:75px;}
	.dash_title{padding-top:10px;}
	.dash{width:50%; margin-bottom:20px;}
	.dash.hours_dash:after{display:none;}
	
	.area_video{margin:40px 0;}
	.area_video ul li{width:49%;}
	.icon_new{height:20px; width:45px;}

	.area_mainmenu{margin:40px 0}
	.area_mainmenu ul li p{font-size:14px;}
	.area_mainmenu ul li.icon01 a .img{width:50px; height:42px; margin:0 auto; background:url(../../images/main/icon_main01.svg) no-repeat center; background-size:100%;}
	.area_mainmenu ul li.icon02 a .img{width:45px; height:42px; margin:0 auto; background:url(../../images/main/icon_main02.svg) no-repeat center; background-size:100%;}
	.area_mainmenu ul li.icon03 a .img{width:50px; height:42px; margin:0 auto; background:url(../../images/main/icon_main03.svg) no-repeat center; background-size:100%;}
	.area_mainmenu ul li.icon04 a .img{width:44px; height:42px; margin:0 auto; background:url(../../images/main/icon_main04.svg) no-repeat center; background-size:100%;}

	.area_mainmenu ul li.icon01 a:hover .img{width:50px; height:42px; margin:0 auto; background:url(../../images/main/icon_main01_w.svg) no-repeat center; background-size:100%;}
	.area_mainmenu ul li.icon02 a:hover .img{width:45px; height:42px; margin:0 auto; background:url(../../images/main/icon_main02_w.svg) no-repeat center; background-size:100%;}
	.area_mainmenu ul li.icon03 a:hover .img{width:50px; height:42px; margin:0 auto; background:url(../../images/main/icon_main03_w.svg) no-repeat center; background-size:100%;}
	.area_mainmenu ul li.icon04 a:hover .img{width:44px; height:42px; margin:0 auto; background:url(../../images/main/icon_main04_w.svg) no-repeat center; background-size:100%;}

	.area_event{padding:70px 0}
	.area_event .tabs > li{background:#fff; }
	.area_event .tabs > li a{color:#2278e7;}
	.area_event .tabs li.active{background:#2278e7}
	.area_event .tabs li.active a{color:#fff;}
	.area_event .tabs{width:444px;}
	.area_event .txt .tabs li{margin:0 4px;}
	.area_event .txt span a{font-size:13px; text-align:left;}
	.area_event .txt h3{font-size:18px;}

	.area_community .notice h2 a{font-size:14px;}
	.area_community .notice ul{display:block; border-top:1px solid #111;}	
	.area_community .notice ul li{position:relative; width:100%; height:auto; padding:10px 0; border:0; border-bottom:1px solid #ddd;}
	.area_community .notice ul li h3{display: revert; height:25px; max-height:25px; font-size:15px; margin:0; -webkit-line-clamp:1; white-space: nowrap; text-overflow: ellipsis;}
	.area_community .notice ul li p{margin:8px 0; padding-right:100px; }
	.area_community .notice ul li b{display:none;}
	.area_community .notice ul li span{position:absolute; right:3px; bottom:19px; font-size:13px;}
	
	.area_banner{margin-bottom:70px;}
	.area_banner ul li a > div h2{font-size:20px;}

	.area_community .youtube .img{height:250px;}



}


@media screen and (max-width:550px){
	.area_mainmenu ul li > a{padding:30px 0}
	.area_mainmenu ul li{width:50%;}
	.area_mainmenu ul li:nth-child(3){border-top:1px solid #ededed; border-left: 0;}
	.area_mainmenu ul li:nth-child(4){border-top:1px solid #ededed; background:#fff}

	.area_event .tabs{display:flex; align-items: stretch; width:100%;}
	.area_event .txt .tabs li{box-sizing:border-box; margin:0; width:33.3%; border-left:1px solid #ddd}
	.area_event .txt .tabs li:first-child{border-left:0}

	.area_banner ul li{height:200px;}
	.area_banner ul li a > div{left:150px; width:calc(100% - 160px);}
	.area_banner ul li:first-child{background: #2278e7 url(../../images/main/img_banner01.svg) no-repeat 25px 50%;  background-size: 100px;}
	.area_banner ul li:last-child{background: #f2f2f2 url(../../images/main/img_banner02.svg) no-repeat 25px 50%; background-size:100px;}
}

@media screen and (max-width:480px){
	.area_event .tabs > li > a{font-size:12px;}
	.area_community .youtube .img{height:190px;}
}

@media screen and (max-width:395px){
	.area_banner ul li{height:170px;}
	.area_banner ul li:first-child{background: #2278e7 url(../../images/main/img_banner01.svg) no-repeat 25px 50%; background-size: 70px;}
	.area_banner ul li:last-child {background: #f2f2f2 url(../../images/main/img_banner02.svg) no-repeat 25px 50%; background-size: 70px;}
	.area_banner ul li a > div{left:120px;}
}

@media screen and (max-width:320px){
	.area_video ul li{width:100%;}
}