.profile { display: flex; } .profile .main h2 { font-size: 2.0833333333vw; font-weight: normal; color: #00479d; margin-bottom: 1.7708333333vw; } .profile .main p { line-height: 2.0833333333vw; font-size: 1.0416666667vw; color: #333; margin-bottom: 1.0416666667vw; } .profile .video { width: 34.8958333333vw; margin-left: 6.5625vw; } .profile .video .my-video { width: 100%; height: 19.6354166667vw; overflow: hidden; border-radius: 3.6458333333vw 0 3.6458333333vw 0; margin-bottom: 2.1875vw; position: relative; cursor: pointer; background-color: #000; } .profile .video .my-video video { width: 100%; height: 100%; position: relative; z-index: 1; } .profile .video .my-video::after { content: ""; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.1) url("../images//inner/about/icon_play.png") no-repeat 50% 50%; background-size: 4.6354166667vw auto; position: absolute; top: 0; left: 0; z-index: 10; transition: all 0.3s ease-in-out; opacity: 1; } .profile .video .my-video.play::after { opacity: 0; visibility: hidden; } .park { padding-bottom: 3.6458333333vw; } .park .main { display: flex; justify-content: space-between; } .park .main .content { display: flex; flex-direction: column; justify-content: space-between; } .park .main .content:nth-child(1) { margin-right: 1.5625vw; } .park .main .content .item { width: 100%; height: auto; margin-bottom: 1.5625vw; } .park .main .content .item.title { display: flex; flex-direction: column; height: 11.25vw; background-size: 5.9375vw auto; background-repeat: no-repeat; color: #00479d; } .park .main .content .item.title h2 { font-size: 2.9166666667vw; font-weight: normal; } .park .main .content .item.title span { font-size: 1.9791666667vw; opacity: 0.2; } .park .main .content:nth-child(1) .item.title { background-image: url("../images/inner/about/yqhj_img_07.png"); background-position: 100% 100%; } .park .main .content:nth-child(2) .item.title { background-image: url("../images/inner/about/yqhj_img_08.png"); background-position: 0 100%; text-align: right; justify-content: flex-end; } .history .main { position: relative; height: 38.5416666667vw; overflow: hidden; } .history .main::-webkit-scrollbar { width: 0; } .history .main .btn-arrow { display: flex; justify-content: center; align-items: center; width: 2.1875vw; height: 5.2083333333vw; font-size: 1.5625vw; position: absolute; top: 18.2291666667vw; z-index: 10; background-color: #00479d; color: #fff; cursor: pointer; } .history .main .btn-arrow.icon-left-arrow { left: 0; border-radius: 0.5208333333vw 0 0.5208333333vw 0; } .history .main .btn-arrow.icon-right-arrow { right: 0; border-radius: 0 0.5208333333vw 0 0.5208333333vw; } .history .main #liwidth { position: absolute; top: 0; width: 21.875vw; } .history .main .history-block { padding: 0 3.75vw; height: 100%; background: url("../images/inner/about/fzlc_bg.png") repeat-x 0 20.3125vw; background-size: auto 0.5208333333vw; position: relative; z-index: 1; transition: margin 0.5s ease-in-out; } .history .main .history-block .list { display: flex; flex-direction: row; flex-wrap: nowrap; } .history .main .history-block .list.m { display: none; } .history .main .history-block .list li { width: 21.875vw; height: auto; position: relative; border-left: 1px solid #ccc; padding: 0 0.8333333333vw; box-sizing: border-box; } .history .main .history-block .list li::before, .history .main .history-block .list li::after { content: ""; position: absolute; left: -5px; width: 5px; height: 5px; border: 2px solid transparent; border-radius: 50%; } .history .main .history-block .list li::before { background-color: #ccc; border-color: #eee; } .history .main .history-block .list li::after { background-color: #fff; border-color: #00479d; } .history .main .history-block .list li h3 { line-height: 2.3958333333vw; font-size: 1.875vw; color: #00479d; } .history .main .history-block .list li p { line-height: 1.3541666667vw; font-size: 0.8333333333vw; color: #333; margin-bottom: 0.3125vw; } .history .main .history-block .list li p::before { content: ""; display: block; float: left; width: 0.3125vw; height: 0.3125vw; border-radius: 50%; background-color: #00479d; margin-right: 0.2083333333vw; margin-top: 0.5208333333vw; } .history .main .history-block .list:nth-child(1) { height: 20.8333333333vw; align-items: flex-end; } .history .main .history-block .list:nth-child(1) li { padding-bottom: 3.125vw; } .history .main .history-block .list:nth-child(1) li::before { bottom: -4px; } .history .main .history-block .list:nth-child(1) li::after { top: -5px; } .history .main .history-block .list:nth-child(1) li h3 { margin-top: -1.1979166667vw; } .history .main .history-block .list:nth-child(2) { height: 17.7083333333vw; padding-left: 9.4791666667vw; align-items: flex-start; } .history .main .history-block .list:nth-child(2) li { height: 5.7291666667vw; padding-top: 4.53125vw; } .history .main .history-block .list:nth-child(2) li::before { top: -5px; } .history .main .history-block .list:nth-child(2) li::after { bottom: -5px; } .partner { text-align: center; } .partner img { height: auto; max-width: 100%; } .partner img.pc { width: 68.90625vw; } .partner img.m { display: none; } .honors .m { display: none; } .honors .list { display: flex; flex-wrap: wrap; width: 66.6666666667vw; margin: 0 auto; } .honors .list li { width: 20.8333333333vw; margin-right: 2.0833333333vw; margin-bottom: 2.0833333333vw; } .honors .list li:nth-child(3n) { margin-right: 0; } .honors .list li a { display: block; cursor: pointer; } .honors .list li a .thumb { width: 100%; height: 15.625vw; background-repeat: no-repeat; background-size: contain; background-position: 50% 50%; background-color: #f9f9f9; box-sizing: border-box; border: 0.7291666667vw solid #f9f9f9; } .honors .list li a .thumb img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .honors .list li a .title { line-height: 3.125vw; text-align: center; font-size: 1.0416666667vw; color: #666; transition: all 0.3s ease-in-out; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .honors .list li a:hover .title { color: #00479d; } .honors .viewer-title { font-size: 1.1458333333vw; color: #fff; opacity: 1; } .honors .viewer-toolbar { display: flex; justify-content: center; align-items: center; } .honors .viewer-toolbar li + li { margin: 0 2px; } .honors .viewer-toolbar .viewer-invisible { display: none; } .xswl img { display: block; height: auto; margin: 0 auto; } .xswl img.pc { width: 62.5vw; border-radius: 4.1666666667vw 0 4.1666666667vw 0; } .xswl img.m { display: none; } @media screen and (max-width: 768px) { .profile { flex-direction: column; } .profile .main h2 { line-height: 13.3333333333vw; font-size: 6.1333333333vw; } .profile .main P { line-height: 6.4vw; font-size: 3.4666666667vw; margin-bottom: 2.6666666667vw; } .profile .video { width: 100%; margin: 0; } .profile .video .my-video { height: 50.9333333333vw; margin-bottom: 4.2666666667vw; border-radius: 9.3333333333vw 0 9.3333333333vw 0; } .profile .video .my-video::after { background-size: 11.8666666667vw auto; } .park { padding-bottom: 5.3333333333vw; } .park .main { flex-wrap: wrap; } .park .main .content { width: 100%; } .park .main .content:nth-child(1) { margin-right: 0; } .park .main .content .item { margin-bottom: 4vw; } .park .main .content .item.title { height: 22.6666666667vw; background-size: 11.4666666667vw auto; } .park .main .content .item.title h2 { line-height: 8.2666666667vw; font-size: 6.1333333333vw; } .park .main .content .item.title span { font-size: 4.5333333333vw; } .history .main { height: auto; } .history .main .btn-arrow { display: none; } .history .main .history-block { padding: 0 0 0 0.9333333333vw; width: 100% !important; height: auto; } .history .main .history-block .list.pc { display: none; } .history .main .history-block .list.m { display: block; width: 100% !important; border-left: 0.1333333333vw solid #e8e8e8; } .history .main .history-block .list.m li { width: 100%; padding-left: 2vw; border-left: 0; margin-bottom: 2.6666666667vw; } .history .main .history-block .list.m li::before { display: none; } .history .main .history-block .list.m li::after { box-sizing: border-box; width: 1.8666666667vw; height: 1.8666666667vw; left: 0; top: 2.4vw; transform: translate(-50%, 0); } .history .main .history-block .list.m li h3 { line-height: 6.6666666667vw; font-size: 4.8vw; } .history .main .history-block .list.m li p { line-height: 5.3333333333vw; font-size: 3.4666666667vw; margin-bottom: 1.6vw; } .history .main .history-block .list.m li p::before { width: 1.0666666667vw; height: 1.0666666667vw; margin-top: 2.1333333333vw; margin-right: 1.0666666667vw; } .partner img.cp { display: none; } .partner img.m { display: block; width: 100%; } .honors .cp { display: none; } .honors .m { display: block; } .honors .m .list { width: 100%; justify-content: space-between; } .honors .m .list li { width: 43.2vw; margin: 0; margin-bottom: 3.7333333333vw; } .honors .m .list li a .thumb { height: 32.2666666667vw; padding: 1.3333333333vw; } .honors .m .list li a .title { line-height: 8vw; font-size: 3.4666666667vw; } .xswl img.pc { display: none; } .xswl img.m { display: block; width: 100%; border-radius: 10.6666666667vw 0 10.6666666667vw 0; } }/*# sourceMappingURL=about.css.map */