@charset "utf-8"; html,body{ width:100%; height:100%; } .page{ position:relative; width:100%; height:100%; min-height:100%; padding:5.15625% 0 2.03125%; background-color:#f7f7f7; } .header{ position:fixed; top:0; left:0; z-index:1; width:100%; padding:1.5625% 5.46875%; background:url(../images/index/bg_header.jpg) no-repeat center; background-size:cover; font-size:39px; font-size:2.03125vw; line-height:1em; color:#ffffff; } .header>img{width: auto;height: 60%;display: inline-block;position: absolute;left: 1.5%;top: 20%;} .container{ height:100%; } .courseware{ position:relative; height:100%; background:url(../images/index/bg_courseware.jpg) no-repeat 33.3333% center; background-size:cover; } .courseware__head{ width:37.5%; height:100%; text-align:center; } .courseware__head:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle; } .courseware__headline{ display:inline-block; padding:3.125% 0; vertical-align:middle; } .courseware__headlineZh{ font-size:48px; font-size:2.5vw; color:#fff; } .courseware__headlineEn{ font-size:21px; font-size:1.09375vw; color:#fff; } .courseware__body{ position:absolute; top:0; right:0; overflow-y:auto; width:62.5%; height:100%; text-align:center; } .courseware__body:before{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle; } .courseware__list{ display:inline-block; width:80%; padding:1.25% 0; vertical-align:middle; } .courseware__item{ float:left; width:35.9375%; margin:1.25% 0 1.25% 9.375%; } .courseware__link{ display:block; padding:5% 5% 2.5%; border:1px solid #ccc; border-radius:5px; background-color:#fff; } .courseware__link:hover{ border-color:#0081b1; } .courseware__pic{ width:100%; } .courseware__pic>img{ width:100%; vertical-align:middle; } .courseware__title{ display:block; margin-top:2.5%; font-size:18px; font-size:0.9375vw; color:#0081b1; text-align:center; } .footer{ position:absolute; bottom:0; left:0; width:100%; padding:0.625% 0; background-color:#006779; font-size:15px; font-size:0.78125vw; line-height:1.5em; color:#fff; text-align:center; } @media screen and (max-width:750px){ .page{ height:auto; padding:10.3125% 0 8.125%; } .header{ padding:3.125% 10%; font-size:78px; font-size:4.0625vw; text-align:left; } .header img{left: 2.5%;} .courseware{ background-position:left top; background-size:250%; } .courseware__head{ width:100%; } .courseware__headlineZh{ font-size:96px; font-size:5vw; } .courseware__headlineEn{ font-size:42px; font-size:2.1875vw; } .courseware__body{ position:relative; width:100%; background-color:#f7f7f7; } .courseware__body:before{ content:none; } .courseware__list{ width:100%; padding:2.5% 0; } .courseware__item{ width:45.5%; margin:2.5% 0 2.5% 3%; } .courseware__link{ border-color:#e7e7e7; } .courseware__title{ font-size:72px; font-size:3.75vw; } .footer{ padding:2.5% 0; font-size:60px; font-size:3.125vw; } } /* video */ .header__exit{ position:absolute; top:0; right:5.46875%; width:7.8125%; margin-top:1.5625%; padding:0.625% 0; border-bottom:1px solid #4d4d4d; border-radius:15%/50%; background-color:#fff; font-size:18px; font-size:0.9375vw; line-height:1em; color:#006779; text-align:center; cursor:pointer; } .video{ overflow-y:auto; height:100%; padding:3.125%; background:url(../images/index/bg_video.jpg) no-repeat center; background-size:cover; text-align:center; } .video:after{ content:""; display:inline-block; width:0; height:100%; vertical-align:middle; } .video__inner{ display:inline-block; width:62.5%; vertical-align:middle; } .fullScreen{ float:right; margin-bottom:1%; padding-left:2.5%; background:url(../images/index/icon-fullScreen.png) no-repeat left center; background-size:contain; font-size:24px; font-size:1.25vw; line-height:1em; color:#fff; cursor:pointer; } .video__body{ position:relative; clear:both; overflow:hidden; width:100%; margin-left:-10px; padding-top:56.25%; border:5px solid #fff; border-radius:5px; box-sizing:content-box; } .video__bodyInner{ position:absolute; top:0; left:0; width:100%; height:100%; } .video__bodyInner>img{ width:100%; height:100%; vertical-align:middle; } @media screen and (max-width:750px){ .page--video{ height:100%; } .header__exit{ right:2%; width:19.53125%; margin-top:2.03125%; padding:1.25% 0; border-bottom:none; font-size:72px; font-size:3.75vw; } .video__inner{ width:93.75%; } .fullScreen{ margin-bottom:2%; padding-left:5%; font-size:72px; font-size:3.75vw; } .video__body{ margin-left:-2px; border:1px solid #fff; } @media screen and (orientation:landscape){ .page--video{ padding:0; } .page--video .header{ display:none; } .page--video .footer{ display:none; } } } header { position: relative; height: .6rem; padding: .05rem .5rem; background: #FFFFFF; line-height: .3rem; position: fixed; top: 0; left: 0; width: 100%; right: 0; z-index: 11; display: flex; align-items: center; justify-content: space-between; } header img{ height: .44rem;display: block;width: .44rem;} header span { /* position: absolute; */ color: #270975; font-size: .22rem; font-weight: 500; display: block; left: 1rem; top: .15rem; } header ul li { float: left; color: #444444; padding: 0 .4rem; line-height: .3rem; font-size: .16rem; border-radius: 5px; } header ul li a { display: inline-block; color: #444444; line-height: .3rem; } header ul li+li { margin-left: .25rem; } .pc header ul li:hover, header ul li.active { background-color: #6240BA; color: #FFFFFF; } .pc header ul li:hover a, header ul li.active a { color: #FFFFFF; } main { background-image: url(../img/bgImg.png); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; background-position: left; width: 100%; min-height: calc(100vh - .6rem); /* height: */ padding: 0 1.5rem; overflow-y: auto; margin-top: .6rem; display: block; } .pc main .main-wrap{ min-height: calc(100vh - .6rem - .5rem); display: flex; flex-direction: column; justify-content: space-around; } main .top-title { padding: .4rem 0; height: 1.5rem; position: relative; color: #FFFFFF; font-size: .18rem; text-align: center; } main .top-title span.title-ch { display: block; font-size: .38rem; line-height: .4rem; } main .top-title span.title-en { display: block; line-height: .18rem; margin-top: .15rem; } main .project-main { width: 90%; margin: 0 auto; padding-bottom: .2rem; /* overflow-y: auto; */ } main .project-main ul { padding: 0 1rem .45rem; width: 100%; overflow-x: hidden; background: #FFFFFF; } main .project-main ul li { float: left; width: calc(33.33% - .4rem); margin: .45rem .2rem 0; margin-top: .45rem; } main .project-main ul li a { display: block; width: 100%; height: auto; transition: all .5s; } .pc main .project-main ul li:hover a{ transform: scale(1.05); box-shadow: 0 5px 20px 1px rgba(64,39,128,.5); } main .project-main ul li a span:first-child { display: block; position: relative; width: 100%; height: 2.05rem; overflow-y: hidden; z-index: 8; } main .project-main ul li img { position: absolute; top: 0; width: 100%; /* max-height: 100%; */ } main .project-main ul li a span:last-child { display: block; text-align: center; background-color: #6240BA; font-size: .16rem; color: #FFFFFF; padding: .1rem; height: .3rem; line-height: .3rem; z-index: 9; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } footer { display: block; text-align: center; font-size: .14rem; line-height: .15rem; color: #FFFFFF; height: .5rem; box-sizing: border-box; padding: .2rem 0 .15rem 0; letter-spacing: .02rem; } .phone a::selection{ background: transparent; } .phone a::-moz-selection{ background: transparent; } .phone a::-webkit-selection{ background: transparent; } body{ overflow-y: auto; } /* 手机端 */ .phone header{ padding: .15rem .15rem; height: .8rem; line-height: .5rem; } .phone header span{ display: none; } .phone header ul li{ padding: 0 .15rem; line-height: .5rem; font-size: .24rem; } .phone header ul li a{ display: inline-block; line-height: .5rem; } .phone header ul li+li{ margin-left: .15rem; } .phone main{ width: 100%; margin-top: .8rem; padding: 0; overflow-y: auto; min-height: calc(100vh - 0.8rem); } .phone main .top-title{ font-size: .28rem; height: 1.75rem; } .phone main .top-title span.title-en{ line-height: .28rem; } .phone main .main-wrap .project-main{ width: 100%; padding: 0; } .phone main .main-wrap .project-main ul{ width: 100%; padding: 0; background: transparent; } .phone main .main-wrap .project-main ul li{ margin: 0 0 .4rem; clear: both; width: 100%; padding: 0 .6rem; border-radius: 5px; /* background: #FFFFFF; */ } .phone main .main-wrap .project-main ul li a{ box-shadow: 0 5px 20px 1px rgba(64,39,128,1); } .phone main .project-main ul li a span:first-child{ height: 3.53rem; } .phone main .project-main ul li a span:last-child{ font-size: .3rem; line-height: .5rem; height: .5rem; } .phone main footer{ font-size: .24rem; line-height: .3rem; height: auto; } .to-top{ display: none; position: fixed; right: 30px; bottom: 30px; cursor: pointer; } @media screen and (max-width:980px){ header span { display: none; } /* 手机端 */ header{ padding: .15rem .15rem; height: .8rem; line-height: .5rem; } header span{ left: .3rem; font-size: .28rem; display: none; } header ul{ right: .3rem; } header ul li{ padding: 0 .15rem; line-height: .5rem; font-size: .24rem; } header ul li a{ display: inline-block; line-height: .5rem; } header ul li+li{ margin-left: .15rem; } main{ width: 100%; margin-top: .8rem; padding: 0; overflow-y: auto; min-height: calc(100vh - 0.8rem); } main .top-title{ font-size: .28rem; height: 1.75rem; } main .top-title span.title-en{ line-height: .28rem; } main .main-wrap .project-main{ width: 100%; padding: 0; } main .main-wrap .project-main ul{ width: 100%; padding: 0; background: transparent; } main .main-wrap .project-main ul li{ margin: 0 0 .4rem; clear: both; width: 100%; padding: 0 .6rem; border-radius: 5px; /* background: #FFFFFF; */ } main .main-wrap .project-main ul li a{ box-shadow: 0 5px 20px 1px rgba(64,39,128,1); } main .project-main ul li a span:first-child{ height: 3.53rem; } main .project-main ul li a span:last-child{ font-size: .3rem; line-height: .5rem; height: .5rem; } main footer{ font-size: .24rem; line-height: .3rem; height: auto; } }