@Charset "utf-8";
@import url("common.css");

#head.on {background:rgba(0,0,0,0.4);}

.t60 {font-size:60px; font-weight:bold; color:#111;}
.t50 {font-size:50px; font-weight:bold; color:#111; text-align:center;}

#bbs {position:relative; padding:130px 0 70px; box-sizing:border-box; overflow:hidden;}
#bbs .bbs {max-width:1400px; margin:0 auto; z-index:2;}
#bbs .bbs .list {display:flex; justify-content:space-between; margin-top:70px;}
#bbs .bbs .list .item {width:440px; margin:0 15px 15px; box-shadow:1px 1px 5px #ddd; overflow:hidden;}
#bbs .bbs .list img {width:100%; height:100%; max-height:215px; object-fit:cover;}
#bbs .bbs .t18 {display:inline-block; min-width:70px; height:40px; line-height:40px; font-size:20px; color:#fff; margin:30px 20px 20px; padding:0 20px; background:#00387f; border-radius:30px;}
#bbs .bbs .t20 {display:block; font-size:20px; font-weight:bold; color:#111111; line-height:25px; height:50px; padding:0 20px 0 30px; margin-bottom:20px; word-break:break-all; overflow:hidden;}
#bbs .bbs .t16 {display:block; font-size:16px; color:#444444; line-height:20px; height:60px; padding:0 20px 0 30px; word-break:break-all; overflow:hidden;}
#bbs .bbs .more {display:block; font-size:14px; font-weight:bold; color:#313131; text-align:center; padding:30px 20px;}
#bbs .bbs .day {display:block; font-size:13px; font-weight:300; color:#8e8e8e; padding:0 20px 20px 30px;}

#bbs .bbs2 {max-width:1400px; margin:0 auto; z-index:2;}
#bbs .bbs2 .t50 {display:block; width:100%; margin-bottom:70px;}
#bbs .bbs2 .box {position:relative; float:left; width:calc(33.3% - 30px); margin:0 15px 15px; box-shadow:1px 1px 5px #ddd; overflow:hidden;}
#bbs .bbs2 .list .img img {width:100%; height:100%; height:215px; object-fit:cover;}
#bbs .bbs2 .t18 {display:inline-block; min-width:70px; height:40px; line-height:40px; font-size:20px; color:#fff; margin:30px 20px 20px; padding:0 20px; background:#00387f; border-radius:30px;}
#bbs .bbs2 .t20 {display:block; font-size:20px; font-weight:bold; color:#111111; line-height:25px; height:50px; padding:0 20px 0 30px; margin-bottom:20px; word-break:break-all; overflow:hidden;}
#bbs .bbs2 .t16 {display:block; font-size:16px; color:#444444; line-height:20px; height:60px; padding:0 20px 0 30px; word-break:break-all; overflow:hidden;}
#bbs .bbs2 .more {display:block; font-size:14px; font-weight:bold; color:#313131; text-align:center; padding:30px 20px;}
#bbs .bbs2 .more img {display:inline-block; width:18px; margin-left:10px;}
#bbs .bbs2 .day {display:block; font-size:13px; font-weight:300; color:#8e8e8e; padding:0 20px 20px 30px;}

#bbs .bbs2 .slick-dots {position:absolute; bottom:250px; right:20px; line-height:8px; z-index:2;}
#bbs .bbs2 .slick-dots button {width:8px; height:8px; font-size:0; border:0; background:#ddd; border-radius:50px; cursor:pointer;}
#bbs .bbs2 .slick-dots li {display:inline-block; margin:0 4px;} 
#bbs .bbs2 .slick-dots .slick-active button {background:#2b89ff;}

#bbs .bbs2 .box:nth-child(2) .t18 {background:#00a651;} 	
#bbs .bbs2 .box:nth-child(3) .t18 {background:#075fff;} 	

@media only screen and (max-width:1000px) {
	#bbs {height:auto; padding:50px 0;}
	#bbs .bbs {position:relative; top:0; left:0; transform: translate(0, 0); width:auto;}
	#bbs .bbs2 {position:relative; top:0; left:0; transform: translate(0, 0); width:auto;}
	
	#bbs .bbs {display:block; margin:30px auto 0}
	#bbs .bbs .list {display:block;}
	#bbs .bbs .list .item {width:auto;}
	#bbs .bbs .t20 {height:auto; margin:0; padding:0 30px 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs .t16 {height:auto; margin:0; padding:0 30px 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs .more {padding:0 30px 20px; text-align:left;}
	
	#bbs .bbs2 .t50 {margin-bottom:50px;}
	#bbs .bbs2 .box {width:calc(100% - 50px); padding:10px; margin-bottom:10px;}
	#bbs .bbs2 .t20 {height:auto; margin:0; padding:0 30px 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs2 .t16 {height:auto; margin:0; padding:0 30px 10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
	#bbs .bbs2 .more {padding:0 30px 20px; text-align:left;}
	#bbs .bbs2 .slick-dots {bottom:140px;}
	
}
@media only screen and (max-width:640px) {
	#bbs .bbs .list .img {display:none;}

	#bbs .bbs2 .list .img {display:none;}
	#bbs .bbs2 .slick-dots {top:30px; right:5px;}

}


#qmenu {max-width:1400px; margin:70px auto; height:720px;}
#qmenu .item {position:relative; float:left; width:33%; height:100%; overflow:hidden; z-index:2;}
#qmenu .item:nth-child(2) {width:calc(34% - 2px); margin-left:-1px; border-left:1px solid rgba(255,255,255,0.5);}
#qmenu .item:nth-child(3) {margin-left:-1px; border-left:1px solid rgba(255,255,255,0.5); }
#qmenu .item .box_img {width:100%; height:100%; background:#1e1e1e;}
#qmenu .item .box_img img {opacity:0.5;}
#qmenu .item .box_img2 {width:100%; height:100%; background:#1e1e1e;}
#qmenu .item:hover .box_img {background:#00387f;}
#qmenu .item .img {width:100%; height:100%; object-fit:cover;}
#qmenu .item .box {position:absolute; top:50%; left:0; transform:translate(0, -50%); width:100%; text-align:center; word-break:keep-all; }
#qmenu .item .box .icon {height:60px;}
#qmenu .item .box .t40 {font-size:40px; font-weight:bold; color:#fff;}
#qmenu .item .box .t18 {font-size:18px; font-weight:300; color:#fff; margin:15px 0 60px; opacity:0.5;}
#qmenu .item .box .btn {text-align:center;}
#qmenu .item .box .btn a {display:inline-block; margin:0 3px 10px; width:185px; height:60px; line-height:60px; font-size:20px; color:#fff; border:1px solid #fff; text-align:center; border-radius:50px;}
#qmenu .item .box .btn a.bg {color:#111111; background:#fff;}

@media only screen and (max-width:1000px) {
	#qmenu {height:auto;}
	#qmenu .item {float:none; width:auto; height:370px;}
	#qmenu .item:nth-child(2) {width:auto; margin-left:0; border-left:none;  border-bottom:1px solid rgba(255,255,255,0.5);}
	#qmenu .item:nth-child(3) {margin-left:0; border-left:none;  border-bottom:1px solid rgba(255,255,255,0.5);}

}


#gallery {padding:70px 0 50px; overflow:hidden;}
#gallery .gallery {max-width:1400px; margin:0 auto;}
#gallery .gallery .list {margin-top:50px; overflow:hidden;}
#gallery .gallery .list .item {float:left; width:calc(25% - 30px); margin:0 15px 30px; overflow:hidden;}
#gallery .gallery .list .item .img {display:block; height:370px;}
#gallery .gallery .list .item .img img {width:100%; height:100%; object-fit:cover;}
#gallery .gallery .list .item .img2 {display:block; height:320px;}
#gallery .gallery .list .item .img2 img {width:100%; height:100%; object-fit:cover;}
#gallery .gallery .list .item .t20 {display:block; font-size:20px; font-weight:bold; color:#111111; margin-top:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#gallery .gallery .list .item .day {display:block; font-size:16px; color:#444444; text-align:right; margin-top:10px;}
#gallery .gallery .more {text-align:right; margin-right:15px;}
#gallery .gallery .more a {font-size:20px; color:#0054a6;}
#gallery .gallery .more a img {margin-bottom:7px;}

@media only screen and (max-width:1000px) {
	#gallery {padding:50px 0;}
	#gallery .gallery .list .item {width:calc(50% - 30px);}
	#gallery .gallery .list .item .day {display:none;}

}


#graduate {padding:50px 0 50px; overflow:hidden;}
#graduate .graduate {max-width:1400px; margin:0 auto 70px;}
#graduate .graduate .list {margin-top:50px; overflow:hidden;}
#graduate .graduate .list .item {display:flex; flex-direction:row-reverse; overflow:hidden;}
#graduate .graduate .list .item .img {width:54%; height:400px;}
#graduate .graduate .list .item .img img {width:100%; height:100%; object-fit:cover;}
#graduate .graduate .list .item .text {width:46%; padding:0 50px 0 20px; word-break:keep-all; box-sizing:border-box;}
#graduate .graduate .list .item .t30 {display:block; max-height:80px; font-size:30px; font-weight:bold; color:#333; line-height:40px; margin-top:20px; overflow:hidden;}
#graduate .graduate .list .item .t20 {display:block; max-height:120px; font-size:20px; color:#444; line-height:30px; margin-top:30px; overflow:hidden;}
#graduate .graduate .list .item .more {display:inline-block; padding:15px 20px; font-size:16px; font-weight:500; color:#0054a6; margin-top:30px; border:2px solid #0054a6; border-radius:30px;}

#graduate .graduate_list {margin:70px 0; background:linear-gradient(to right, #0054a6 50%, #fff 50%);}
#graduate .graduate_list .box {display:flex; position:relative; max-width:1400px; margin:0 auto;}
#graduate .graduate_list .box .bg {position:absolute; top:50%; left:-90px; transform:translate(0, -50%);}
#graduate .graduate_list .box .bg2 {position:absolute; top:35px; left:30px; width:calc(100% - 70px); max-width:540px; display:none;}
#graduate .graduate_list .box .btn_list {width:300px; height:560px; padding-top:120px; background:#0054a6;  box-sizing:border-box;}
#graduate .graduate_list .box .btn_list a {display:block; padding:0 0 20px 20px; font-size:30px; color:#fff; border-bottom:3px solid #fff;}
#graduate .graduate_list .box .list {width:calc(100% - 300px); padding:60px 0 60px 80px; box-sizing:border-box; background:#fff;}
#graduate .graduate_list .box .list .item {display:flex; align-items:center; justify-content:center; flex-direction:column; height:360px; margin:0 15px; text-align:center; word-break:keep-all; border:1px solid #ddd;}
#graduate .graduate_list .box .list .t22 {display:block; font-size:22px; font-weight:bold; color:#111; margin:15px 0 10px;}
#graduate .graduate_list .box .list .t18 {display:block; font-size:18px; max-height:50px; color:#444; overflow:hidden;}
#graduate .graduate_list .box .num {position:absolute; bottom:60px; left:40px; font-size:24px; color:#fff;}

#graduate .graduate_list .slick-prev {position:absolute; bottom:40px; left:-200px; z-index:10; width:70px; height:70px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/slick-prev2.png") no-repeat 0 0; cursor:pointer;}
#graduate .graduate_list .slick-next {position:absolute; bottom:40px; left:-100px; z-index:10; width:70px; height:70px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/slick-next2.png") no-repeat 0 0; cursor:pointer;}
#graduate .graduate_list .slick-dots {display:none !important;}

#graduate2 {padding:0 30px 20px; background:#f3f3f3; overflow:hidden;}
#graduate2 .graduate_list2 {max-width:1400px; margin:0 auto;}
#graduate2 .graduate_list2 .list {margin-top:50px; overflow:hidden;}
#graduate2 .graduate_list2 .list .item {float:left; width:calc(25% - 30px); margin:0 15px 30px; overflow:hidden;}
#graduate2 .graduate_list2 .list .item .img2 {display:block; height:320px;}
#graduate2 .graduate_list2 .list .item .img2 img {width:100%; height:100%; object-fit:cover;}
#graduate2 .graduate_list2 .list .item .t20 {display:block; font-size:20px; font-weight:bold; color:#111111; margin-top:20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}

#graduate2 .graduate_list2 .slick-prev {position:absolute; top:40px; left:-90px; z-index:10; width:70px; height:70px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/slick-prev2.png") no-repeat 0 0; cursor:pointer;}
#graduate2 .graduate_list2 .slick-next {position:absolute; top:40px; right:-90px; z-index:10; width:70px; height:70px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/slick-next2.png") no-repeat 0 0; cursor:pointer;}


@media only screen and (max-width:1200px) {
	#graduate .graduate {padding:50px 15px;}
	#graduate .graduate .list .item {display:block;}
	#graduate .graduate .list .item .img {width:auto; margin-bottom:30px;}
	#graduate .graduate .list .item .text {width:auto; padding:0;}
	#graduate .graduate .list .item .text .t60 {font-size:40px;}
	#graduate .graduate .list .item .text .t60 span {font-size:40px;}
	#graduate .graduate .list .item .t20 {max-height:none;}
	
	#graduate .graduate_list .box {display:block;}
	#graduate .graduate_list .box .bg {display:none;}
	#graduate .graduate_list .box .bg2 {display:block;}
	
	#graduate .graduate_list .box .btn_list {width:auto; height:auto; min-height:100px; padding:70px 30px 80px;}
	#graduate .graduate_list .box .btn_list a {display:inline-block;}
	#graduate .graduate_list .box .list {width:auto; padding:40px 50px 70px;}
	
	#graduate .graduate_list .box .num {bottom:auto; left:auto; top:163px; right:150px; font-size:20px;}
	#graduate .graduate_list .slick-prev {bottom:auto; left:auto; top:-60px; right:90px; width:46px; height:46px; background:url("/hcm/design/layout2022/a/res/img/slick-prev.png")}
	#graduate .graduate_list .slick-next {bottom:auto; left:auto; top:-60px; right:30px; width:46px; height:46px; background:url("/hcm/design/layout2022/a/res/img/slick-next.png")}
	
	#graduate2 .graduate_list2 .list .item {width:calc(50% - 30px);}
	#graduate2 .graduate_list2 .list .item .day {display:none;}
}


#video {overflow:hidden;}
#video .video {overflow:hidden;}
#video .video .img {width:100%; height:100%; object-fit:cover;}
#video .video a {position:relative; display:block; height:720px; overflow:hidden;}
#video .video a .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);}
#video .video a .bg img {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }

@media only screen and (max-width:1000px) {
	#video .video {height:auto; width:100%;}
	#video .video a {height:520px;}

}
@media only screen and (max-width:640px) {
	#video .video a {height:300px;}

}


#guide {background:#f3f3f3; padding:0 30px; overflow:hidden;}
#guide .guide {max-width:1400px; margin:70px auto 50px;}
#guide .guide .list {display:flex; justify-content:space-around; margin:60px 0 0;}
#guide .guide .list .item {text-align:center; margin-bottom:30px; width:33%;}
#guide .guide .title {font-size:50px; color:#333; text-align:center;}
#guide .guide .num {font-size:50px; color:#d51b1b; line-height:110px;}
#guide .guide .num b {font-size:80px;}
#guide .guide .num2 {font-size:60px; font-weight:bold; color:#d51b1b; line-height:110px;}
#guide .guide .t30 {font-size:30px; font-weight:500; color:#111;}
#guide .guide .t22 {font-size:22px; color:#111;}

@media only screen and (max-width:1000px) {
	#guide .guide .list {display:block;}
	#guide .guide .list .item {width:auto;}
	#guide .guide .num {font-size:40px; line-height:70px;}
	#guide .guide .num b {font-size:50px;}
	#guide .guide .num2 {font-size:50px; line-height:70px;}
	
}



#move {position:fixed; top:40%; left:3%; z-index:5;}
#move .move {display:inline-block;}
#move .move a {display:block; padding:10px 0 10px 20px; font-size:26px; color:#fff; line-height:20px; border-left:3px solid #fff; opacity:0.6;}
#move .move a.on {opacity:1;}

@media only screen and (max-width:1000px) {
	#move {display:none;}
	
}


#link {padding:70px 30px 50px; overflow:hidden;}
#link .link {display:flex; max-width:1400px; margin:0 auto;}
#link .link .item {display:block; width:30%;}
#link .link .item .img {display:block; height:400px; overflow:hidden;}
#link .link .item .img img {width:100%; height:100%; object-fit:cover;}
#link .link .item .text {display:block; padding:25px 20px; text-align:center;}
#link .link .item .t30 {font-size:30px; font-weight:bold;}
#link .link .bg {width:1px; margin:0 3%; background:#d9d9d9;}

@media only screen and (max-width:1000px) {
	#link {padding:50px 30px 50px;}
	#link .link {display:block;}
	#link .link .item {width:100%;}
	#link .link .item .img {height:300px;}
	
}


#qlink {padding:70px 30px 50px; overflow:hidden;}
#qlink .qlink {max-width:1400px; margin:0 auto;}
#qlink .qlink .list {display:flex; flex-wrap:wrap; margin-top:30px; word-break:keep-all;}
#qlink .qlink .list a {display:inline-block; width:20%; margin-bottom:30px; font-size:22px; font-weight:500; color:#111111; padding-left:20px; text-indent:-20px; box-sizing:border-box;}

@media only screen and (max-width:1000px) {
	#qlink .qlink .list a {width:25%;}
	
}
@media only screen and (max-width:800px) {
	#qlink .qlink .list a {width:50%; margin-bottom:20px;}
	
}




#youtube {background:url("/hcm/design/layout2022/a/res/img/youtube_bg.png") repeat 0 0; overflow:hidden;}
#youtube .youtube {position:relative; max-width:1400px; margin:50px auto 80px;}
#youtube .youtube .logo {position:absolute; top:0; left:50%; padding-left:10px;}
#youtube .youtube .logo2 {margin:-20px 0 20px;}
#youtube .youtube .list {display:flex; flex-wrap:wrap; /* height:660px; */}
#youtube .youtube .list .item {width:25%; padding:10px; padding-top:170px; box-sizing:border-box;}
#youtube .youtube .list .img {display:block; height:190px;}
#youtube .youtube .list .img img {width:100%; height:100%; object-fit:cover;}
#youtube .youtube .list .t24 {display:block; font-size:24px; font-weight:bold; color:#fff; margin:30px 0 20px;}
#youtube .youtube .list .t16 {display:block; font-size:16px; color:#fff;}
#youtube .youtube .list .item:nth-child(1) {width:50%; padding-top:0; padding-right:40px;}
#youtube .youtube .list .item:nth-child(1) .img {height:360px;}
#youtube .youtube .list .slick-current {width:650px; padding-top:0; padding-right:40px;}
#youtube .youtube .list .slick-current .img {height:360px;}
/* #youtube .youtube .list .item {width:330px;} */
#youtube .youtube .list .slick-prev {position:absolute; top:30px; right:70px; z-index:10; width:27px; height:52px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/youtube_prev.png") no-repeat 0 0; cursor:pointer;}
#youtube .youtube .list .slick-next {position:absolute; top:30px; right:10px; z-index:10; width:27px; height:52px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/youtube_next.png") no-repeat 0 0; cursor:pointer;}

#youtube .youtube .list2 {display:flex; flex-wrap:wrap; height:370px;}
#youtube .youtube .list2 .item {width:25%; padding:10px; box-sizing:border-box;}
#youtube .youtube .list2 .img {display:block; height:190px;}
#youtube .youtube .list2 .img img {width:100%; height:100%; object-fit:cover;}
#youtube .youtube .list2 .t24 {display:block; font-size:24px; font-weight:bold; color:#fff; margin:30px 0 20px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
#youtube .youtube .list2 .t16 {display:block; font-size:16px; color:#fff; line-height:24px; max-height:96px; overflow:hidden;}
#youtube .youtube .list2 .slick-prev {position:absolute; top:-80px; right:70px; z-index:10; width:27px; height:52px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/youtube_prev.png") no-repeat 0 0; cursor:pointer;}
#youtube .youtube .list2 .slick-next {position:absolute; top:-80px; right:10px; z-index:10; width:27px; height:52px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/youtube_next.png") no-repeat 0 0; cursor:pointer;}

#youtube .instagram {position:relative; max-width:1400px; margin:55px auto 50px;}
#youtube .instagram .logo {display:flex; align-items:center; padding:15px 100px 15px 10px; font-size:30px; line-height:30px; color:#fff; font-weight:500; letter-spacing:-0.05em;}
#youtube .instagram .logo span {margin-left:10px; word-break:keep-all;}
#youtube .instagram .list {display:flex; flex-wrap:wrap; max-height:400px;}
#youtube .instagram .list .item {width:250px; padding:10px;}
#youtube .instagram .list .img {display:block;}
#youtube .instagram .list .img img {width:250px; height:250px; object-fit:cover;}
#youtube .instagram .list .t16 {display:block; font-size:16px; color:#fff; line-height:24px; max-height:96px; margin-top:10px; overflow:hidden;}
#youtube .instagram .list .slick-prev {position:absolute; top:-65px; right:70px; z-index:10; width:27px; height:52px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/youtube_prev.png") no-repeat 0 0; cursor:pointer;}
#youtube .instagram .list .slick-next {position:absolute; top:-65px; right:10px; z-index:10; width:27px; height:52px; font-size:0; border:0; background:url("/hcm/design/layout2022/a/res/img/youtube_next.png") no-repeat 0 0; cursor:pointer;}


@media only screen and (max-width:1000px) {
	#youtube .instagram .logo {font-size:25px; line-height:26px;}
	#youtube .youtube {padding:0 10px;}
	#youtube .youtube .logo {position:relative; left:auto; padding-bottom:20px;}
	#youtube .youtube .list .item {width:50%; padding-top:20px;}
	#youtube .youtube .list .item:nth-child(1) {width:100%; padding-right:10px;} 
	#youtube .youtube .list2 .slick-prev {display:none !important;}
	#youtube .youtube .list2 .slick-next {display:none !important;}
}




@media only screen and (max-width:1000px) {
}
@media only screen and (max-width:640px) {
}
@media only screen and (max-width:480px) {
}
@media only screen and (max-width:400px) {
}