@charset "utf-8"; @keyframes btnMore { 0% { transform: translateX(0); } 100% { transform: translateX(6px); } } @media (hover: hover) and (pointer: fine) { .link-select-box .mt:hover { color: #1EA7DB; } .link-select-box .mt:hover .aw { border-bottom-color: #1EA7DB; } .link-select-box .mc ul a:hover { color: #1EA7DB; } .ifor-ul a:hover { color: #1EA7DB; } .ifor-ul a:hover .txt { transform: translateX(0.5rem); } .ifor-ul a:hover .txt::before { color: #1EA7DB; } .ifor-swiper .item:hover .title { color: #1EA7DB; } .ifive-swiper .item:hover { background-color: #1EA7DB; } .ifive-swiper .item:hover .title, .ifive-swiper .item:hover .time { color: #ffffff; } .video-list li:hover .txt { background-color: #1EA7DB; color: #ffffff; } .video-list li:hover .vico { background-color: #ffffff; color: #333333; } .page-nav2-list a:hover { background-color: #1EA7DB; color: #ffffff; border-color: #1EA7DB; } } @media screen and (min-width: 1181px) { .f17 { font-size: 1.7rem; } .f18 { font-size: 1.8rem; } .f19 { font-size: 1.9rem; } .f20 { font-size: 2rem; } .f21 { font-size: 2.1rem; } .f22 { font-size: 2.2rem; } .f23 { font-size: 2.3rem; } .f24 { font-size: 2.4rem; } .f25 { font-size: 2.5rem; } .f26 { font-size: 2.6rem; } .f27 { font-size: 2.7rem; } .f28 { font-size: 2.8rem; } .f29 { font-size: 2.9rem; } .f30 { font-size: 3rem; } .f31 { font-size: 3.1rem; } .f32 { font-size: 3.2rem; } .f33 { font-size: 3.3rem; } .f34 { font-size: 3.4rem; } .f35 { font-size: 3.5rem; } .f36 { font-size: 3.6rem; } .f37 { font-size: 3.7rem; } .f38 { font-size: 3.8rem; } .f39 { font-size: 3.9rem; } .f40 { font-size: 4rem; } .f41 { font-size: 4.1rem; } .f42 { font-size: 4.2rem; } .f43 { font-size: 4.3rem; } .f44 { font-size: 4.4rem; } .f45 { font-size: 4.5rem; } .f46 { font-size: 4.6rem; } .f47 { font-size: 4.7rem; } .f48 { font-size: 4.8rem; } .f49 { font-size: 4.9rem; } .f50 { font-size: 5rem; } .f51 { font-size: 5.1rem; } .f52 { font-size: 5.2rem; } .f53 { font-size: 5.3rem; } .f54 { font-size: 5.4rem; } .f55 { font-size: 5.5rem; } .f56 { font-size: 5.6rem; } .f57 { font-size: 5.7rem; } .f58 { font-size: 5.8rem; } .f59 { font-size: 5.9rem; } .f60 { font-size: 6rem; } .f61 { font-size: 6.1rem; } .f62 { font-size: 6.2rem; } .f63 { font-size: 6.3rem; } .f64 { font-size: 6.4rem; } .f65 { font-size: 6.5rem; } .f66 { font-size: 6.6rem; } .f67 { font-size: 6.7rem; } .f68 { font-size: 6.8rem; } .f69 { font-size: 6.9rem; } .f70 { font-size: 7rem; } .f71 { font-size: 7.1rem; } .f72 { font-size: 7.2rem; } .f73 { font-size: 7.3rem; } .f74 { font-size: 7.4rem; } .f75 { font-size: 7.5rem; } .f76 { font-size: 7.6rem; } .f77 { font-size: 7.7rem; } .f78 { font-size: 7.8rem; } .f79 { font-size: 7.9rem; } .f80 { font-size: 8rem; } .f81 { font-size: 8.1rem; } .f82 { font-size: 8.2rem; } .f83 { font-size: 8.3rem; } .f84 { font-size: 8.4rem; } .f85 { font-size: 8.5rem; } .f86 { font-size: 8.6rem; } .f87 { font-size: 8.7rem; } .f88 { font-size: 8.8rem; } .f89 { font-size: 8.9rem; } .f90 { font-size: 9rem; } .f91 { font-size: 9.1rem; } .f92 { font-size: 9.2rem; } .f93 { font-size: 9.3rem; } .f94 { font-size: 9.4rem; } .f95 { font-size: 9.5rem; } .f96 { font-size: 9.6rem; } .f97 { font-size: 9.7rem; } .f98 { font-size: 9.8rem; } .f99 { font-size: 9.9rem; } .f100 { font-size: 10rem; } .f101 { font-size: 10.1rem; } .f102 { font-size: 10.2rem; } .f103 { font-size: 10.3rem; } .f104 { font-size: 10.4rem; } .f105 { font-size: 10.5rem; } .f106 { font-size: 10.6rem; } .f107 { font-size: 10.7rem; } .f108 { font-size: 10.8rem; } .f109 { font-size: 10.9rem; } .f110 { font-size: 11rem; } .f111 { font-size: 11.1rem; } .f112 { font-size: 11.2rem; } .f113 { font-size: 11.3rem; } .f114 { font-size: 11.4rem; } .f115 { font-size: 11.5rem; } .f116 { font-size: 11.6rem; } .f117 { font-size: 11.7rem; } .f118 { font-size: 11.8rem; } .f119 { font-size: 11.9rem; } .f120 { font-size: 12rem; } } @media screen and (min-width: 641px) and (max-width: 1180px) { .f29 { font-size: 2.2475rem; } .f30 { font-size: 2.325rem; } .f31 { font-size: 2.4025rem; } .f32 { font-size: 2.48rem; } .f33 { font-size: 2.5575rem; } .f34 { font-size: 2.635rem; } .f35 { font-size: 2.7125rem; } .f36 { font-size: 2.79rem; } .f37 { font-size: 2.8675rem; } .f38 { font-size: 2.945rem; } .f39 { font-size: 3.0225rem; } .f40 { font-size: 3.1rem; } .f41 { font-size: 3.1775rem; } .f42 { font-size: 3.255rem; } .f43 { font-size: 3.3325rem; } .f44 { font-size: 3.41rem; } .f45 { font-size: 3.4875rem; } .f46 { font-size: 3.565rem; } .f47 { font-size: 3.6425rem; } .f48 { font-size: 3.72rem; } .f49 { font-size: 3.7975rem; } .f50 { font-size: 3.875rem; } .f51 { font-size: 3.9525rem; } .f52 { font-size: 4.03rem; } .f53 { font-size: 4.1075rem; } .f54 { font-size: 4.185rem; } .f55 { font-size: 4.2625rem; } .f56 { font-size: 4.34rem; } .f57 { font-size: 4.4175rem; } .f58 { font-size: 4.495rem; } .f59 { font-size: 4.5725rem; } .f60 { font-size: 4.65rem; } .f61 { font-size: 4.7275rem; } .f62 { font-size: 4.805rem; } .f63 { font-size: 4.8825rem; } .f64 { font-size: 4.96rem; } .f65 { font-size: 5.0375rem; } .f66 { font-size: 5.115rem; } .f67 { font-size: 5.1925rem; } .f68 { font-size: 5.27rem; } .f69 { font-size: 5.3475rem; } .f70 { font-size: 5.425rem; } .f71 { font-size: 5.5025rem; } .f72 { font-size: 5.58rem; } .f73 { font-size: 5.6575rem; } .f74 { font-size: 5.735rem; } .f75 { font-size: 5.8125rem; } .f76 { font-size: 5.89rem; } .f77 { font-size: 5.9675rem; } .f78 { font-size: 6.045rem; } .f79 { font-size: 6.1225rem; } .f80 { font-size: 6.2rem; } .f81 { font-size: 6.2775rem; } .f82 { font-size: 6.355rem; } .f83 { font-size: 6.4325rem; } .f84 { font-size: 6.51rem; } .f85 { font-size: 6.5875rem; } .f86 { font-size: 6.665rem; } .f87 { font-size: 6.7425rem; } .f88 { font-size: 6.82rem; } .f89 { font-size: 6.8975rem; } .f90 { font-size: 6.975rem; } .f91 { font-size: 7.0525rem; } .f92 { font-size: 7.13rem; } .f93 { font-size: 7.2075rem; } .f94 { font-size: 7.285rem; } .f95 { font-size: 7.3625rem; } .f96 { font-size: 7.44rem; } .f97 { font-size: 7.5175rem; } .f98 { font-size: 7.595rem; } .f99 { font-size: 7.6725rem; } .f100 { font-size: 7.75rem; } .f101 { font-size: 7.8275rem; } .f102 { font-size: 7.905rem; } .f103 { font-size: 7.9825rem; } .f104 { font-size: 8.06rem; } .f105 { font-size: 8.1375rem; } .f106 { font-size: 8.215rem; } .f107 { font-size: 8.2925rem; } .f108 { font-size: 8.37rem; } .f109 { font-size: 8.4475rem; } .f110 { font-size: 8.525rem; } .f111 { font-size: 8.6025rem; } .f112 { font-size: 8.68rem; } .f113 { font-size: 8.7575rem; } .f114 { font-size: 8.835rem; } .f115 { font-size: 8.9125rem; } .f116 { font-size: 8.99rem; } .f117 { font-size: 9.0675rem; } .f118 { font-size: 9.145rem; } .f119 { font-size: 9.2225rem; } .f120 { font-size: 9.3rem; } .f17 { font-size: 1.4195rem; } .f18 { font-size: 1.503rem; } .f19 { font-size: 1.5865rem; } .f20 { font-size: 1.67rem; } .f21 { font-size: 1.7535rem; } .f22 { font-size: 1.837rem; } .f23 { font-size: 1.9205rem; } .f24 { font-size: 2.004rem; } .f25 { font-size: 2.0875rem; } .f26 { font-size: 2.171rem; } .f27 { font-size: 2.2545rem; } .f28 { font-size: 2.338rem; } } @media screen and (min-width: 0px) and (max-width: 640px) { .w16 { font-size: 1.5rem; } .w17 { font-size: 1.6rem; } .w18 { font-size: 1.7rem; } .w19 { font-size: 1.8rem; } .w20 { font-size: 1.9rem; } .w21 { font-size: 2rem; } .w22 { font-size: 2.1rem; } .w23 { font-size: 2.2rem; } .w24 { font-size: 2.3rem; } .w25 { font-size: 2.4rem; } .w26 { font-size: 2.5rem; } .w27 { font-size: 2.6rem; } .w28 { font-size: 2.7rem; } .w29 { font-size: 2.8rem; } .w30 { font-size: 2.9rem; } .w31 { font-size: 3rem; } .w32 { font-size: 3.1rem; } .w33 { font-size: 3.2rem; } .w34 { font-size: 3.3rem; } .w35 { font-size: 3.4rem; } .w36 { font-size: 3.5rem; } .w37 { font-size: 3.6rem; } .w38 { font-size: 3.7rem; } .w39 { font-size: 3.8rem; } .w40 { font-size: 3.9rem; } .w41 { font-size: 4rem; } .w42 { font-size: 4.1rem; } .w43 { font-size: 4.2rem; } .w44 { font-size: 4.3rem; } .w45 { font-size: 4.4rem; } .w46 { font-size: 4.5rem; } .w47 { font-size: 4.6rem; } .w48 { font-size: 4.7rem; } .w49 { font-size: 4.8rem; } .w50 { font-size: 4.9rem; } .w51 { font-size: 5rem; } .w52 { font-size: 5.1rem; } .w53 { font-size: 5.2rem; } .w54 { font-size: 5.3rem; } .w55 { font-size: 5.4rem; } .w56 { font-size: 5.5rem; } .w57 { font-size: 5.6rem; } .w58 { font-size: 5.7rem; } .w59 { font-size: 5.8rem; } .w60 { font-size: 5.9rem; } .w61 { font-size: 6rem; } .w62 { font-size: 6.1rem; } .w63 { font-size: 6.2rem; } .w64 { font-size: 6.3rem; } .w65 { font-size: 6.4rem; } .w66 { font-size: 6.5rem; } .w67 { font-size: 6.6rem; } .w68 { font-size: 6.7rem; } .w69 { font-size: 6.8rem; } .w70 { font-size: 6.9rem; } .w71 { font-size: 7rem; } .w72 { font-size: 7.1rem; } .w73 { font-size: 7.2rem; } .w74 { font-size: 7.3rem; } .w75 { font-size: 7.4rem; } .w76 { font-size: 7.5rem; } .w77 { font-size: 7.6rem; } .w78 { font-size: 7.7rem; } .w79 { font-size: 7.8rem; } .w80 { font-size: 7.9rem; } .w81 { font-size: 8rem; } .w82 { font-size: 8.1rem; } .w83 { font-size: 8.2rem; } .w84 { font-size: 8.3rem; } .w85 { font-size: 8.4rem; } .w86 { font-size: 8.5rem; } .w87 { font-size: 8.6rem; } .w88 { font-size: 8.7rem; } .w89 { font-size: 8.8rem; } .w90 { font-size: 8.9rem; } .w91 { font-size: 9rem; } .w92 { font-size: 9.1rem; } .w93 { font-size: 9.2rem; } .w94 { font-size: 9.3rem; } .w95 { font-size: 9.4rem; } .w96 { font-size: 9.5rem; } .w97 { font-size: 9.6rem; } .w98 { font-size: 9.7rem; } .w99 { font-size: 9.8rem; } .w100 { font-size: 9.9rem; } .w101 { font-size: 10rem; } .w102 { font-size: 10.1rem; } .w103 { font-size: 10.2rem; } .w104 { font-size: 10.3rem; } .w105 { font-size: 10.4rem; } .w106 { font-size: 10.5rem; } .w107 { font-size: 10.6rem; } .w108 { font-size: 10.7rem; } .w109 { font-size: 10.8rem; } .w110 { font-size: 10.9rem; } .w111 { font-size: 11rem; } .w112 { font-size: 11.1rem; } .w113 { font-size: 11.2rem; } .w114 { font-size: 11.3rem; } .w115 { font-size: 11.4rem; } .w116 { font-size: 11.5rem; } .w117 { font-size: 11.6rem; } .w118 { font-size: 11.7rem; } .w119 { font-size: 11.8rem; } .w120 { font-size: 11.9rem; } } @media screen and (min-width: 1921px) { html { font-size: 11px; } } @media screen and (min-width: 1370px) and (max-width: 1500px) { html { font-size: 9.2px; } body { font-size: 14px; } .f16 { font-size: 15px; } } @media screen and (min-width: 1181px) and (max-width: 1369px) { html { font-size: 8.6px; } body { font-size: 14px; } } @media screen and (min-width: 1181px) { .fixedImg { background-attachment: fixed; } } @media screen and (min-width: 0px) { .transXT50 { transform: translateX(50px); -webkit-transform: translateX(50px); opacity: 0; visibility: hidden; transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); } .transYT50 { transform: translateY(50px); -webkit-transform: translateY(50px); opacity: 0; visibility: hidden; transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); } .transYT502 { transform: translateY(-50px); -webkit-transform: translateY(-50px); opacity: 0; visibility: hidden; transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition-timing-function: ease-out; } .transScale6 { transform: scale(0.6); -webkit-transform: scale(0.6); opacity: 0; visibility: hidden; transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); -webkit-transition: transform 1s ease, opacity 0.4s cubic-bezier(0.445, 0.145, 0.355, 1); } .action.transYT50, .action.transYT502 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .action.transXT50 { opacity: 1; visibility: visible; transform: translateY(0px); -webkit-transform: translateY(0px); } .action .transScale6 { opacity: 1; visibility: visible; transform: inherit; -webkit-transform: inherit; } .action.lod-img { -webkit-animation: nextSlide 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; -moz-animation: nextSlide 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; -o-animation: nextSlide 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; animation: nextSlide 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both 0.3s; } @-webkit-keyframes nextSlide { 0% { opacity: 0.5; -webkit-transform: scale(1.04); transform: scale(1.04); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes nextSlide { 0% { opacity: 0.5; -webkit-transform: scale(1.04); transform: scale(1.04); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } .js-point { -webkit-transition: opacity 0.4s linear, -webkit-transform 0.5s cubic-bezier(0.09, 0.34, 0.63, 1); transition: opacity 0.4s linear, transform 0.5s cubic-bezier(0.09, 0.34, 0.63, 1); opacity: 0; -webkit-transform: translateY(-36px); transform: translateY(-36px); pointer-events: none; } .action.js-point { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); pointer-events: auto; } .clip-w { clip-path: inset(0 100% 0 0); -webkit-transition: 0.8s cubic-bezier(0.09, 0.34, 0.63, 1); transition: 0.8s cubic-bezier(0.09, 0.34, 0.63, 1); } .action .clip-w { clip-path: inset(0 0 0 0); } .target-txt { position: relative; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); display: inline-block; } .target-txt::after { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); color: #ffffff; content: attr(data-text); display: block; left: 0; position: absolute; top: 0; } .action .target-txt, .action .target-txt::after { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); transition: -webkit-clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1); transition: clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1); transition: clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1), -webkit-clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1); } .action .target-txt::after { transition-delay: 0.45s; } .span-txt { display: inline-block; opacity: 0; -webkit-transform: translateX(-0.5em) scale(1.8) rotateY(-90deg); transform: translateX(-0.5em) scale(1.8) rotateY(-90deg); -webkit-transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 2s cubic-bezier(0.19, 1, 0.22, 1); -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, -webkit-transform; transition-property: opacity,transform; transition-property: opacity, transform, -webkit-transform; will-change: opacity,transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .action .span-txt { opacity: 1; -webkit-transform: translateX(0) scale(1) rotateY(0); transform: translateX(0) scale(1) rotateY(0); } .c-pic__in { position: relative; overflow: hidden; -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); transition: -webkit-clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1); transition: clip-path 0.8s cubic-bezier(0.43, 0.05, 0.17, 1); } .action.c-pic__in { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } .c-pic__shape { background: linear-gradient(114deg, rgba(239, 71, 101, 0), rgba(48, 56, 126, 0.8) 30%, rgba(48, 56, 126, 0.8) 80%, rgba(239, 71, 101, 0) 110%); bottom: 0; left: 0; opacity: 0.85; pointer-events: none; position: absolute; right: 0; top: 0; transform: translateX(-100%); transform-origin: right; } .action .c-pic__shape { -webkit-animation: slide 1s cubic-bezier(0.43, 0.05, 0.17, 1) 0.25s; animation: slide 1s cubic-bezier(0.43, 0.05, 0.17, 1) 0.25s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; transform: translateX(0); } .hero_title { -webkit-mask-image: linear-gradient(to right, #000 33.3%, rgba(0, 0, 0, 0) 66.6%); -webkit-mask-position: left center; -webkit-mask-size: 300% 100%; -webkit-mask-repeat: no-repeat; } .action.hero_title { animation: headerTitle 3s cubic-bezier(0.23, 1, 0.32, 1) both; } .hero_title2 { -webkit-mask-image: linear-gradient(to bottom, #000 33.3%, rgba(0, 0, 0, 0) 66.6%); -webkit-mask-position: center top; -webkit-mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; } .action.hero_title2 { animation: headerTitle2 3s cubic-bezier(0.23, 1, 0.32, 1) both; } .hero_title3 { -webkit-mask-image: linear-gradient(to bottom, #000 33.3%, rgba(0, 0, 0, 0) 66.6%); -webkit-mask-position: center top; -webkit-mask-size: 100% 300%; -webkit-mask-repeat: no-repeat; opacity: 0; } .action.hero_title3 { animation: headerTitle3 1.8s cubic-bezier(0.215, 0.61, 0.355, 1) both; opacity: 1; } .txt-en span, .item-span span { visibility: hidden; display: inline-block; } .txt-en2 i, .item-span2 i { visibility: hidden; display: inline-block; } .action .txt-en span, .action .txt-en2 i, .action .item-span span, .action .item-span2 { visibility: visible; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-backface-visibility: visible!important; backface-visibility: visible!important; -webkit-animation-name: tltAnim; animation-name: tltAnim; } .dly-20 { transition-delay: 2s; -webkit-transition-delay: 2s; } .dly-19 { transition-delay: 1.9s; -webkit-transition-delay: 1.9s; } .dly-18 { transition-delay: 1.8s; -webkit-transition-delay: 1.8s; } .dly-17 { transition-delay: 1.7s; -webkit-transition-delay: 1.7s; } .dly-16 { transition-delay: 1.6s; -webkit-transition-delay: 1.6s; } .dly-15 { transition-delay: 1.5s; -webkit-transition-delay: 1.5s; } .dly-14 { transition-delay: 1.4s; -webkit-transition-delay: 1.4s; } .dly-13 { transition-delay: 1.3s; -webkit-transition-delay: 1.3s; } .dly-12 { transition-delay: 1.2s; -webkit-transition-delay: 1.2s; } .dly-11 { transition-delay: 1.1s; -webkit-transition-delay: 1.1s; } .dly-10 { transition-delay: 1s; -webkit-transition-delay: 1s; } .dly-9 { transition-delay: 0.9s; -webkit-transition-delay: 0.9s; } .dly-8 { transition-delay: 0.8s; -webkit-transition-delay: 0.8s; } .dly-7 { transition-delay: 0.7s; -webkit-transition-delay: 0.7s; } .dly-6 { transition-delay: 0.6s; -webkit-transition-delay: 0.6s; } .dly-5 { transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } .dly-4 { transition-delay: 0.4s; -webkit-transition-delay: 0.4s; } .dly-3 { transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } .dly-2 { transition-delay: 0.2s; -webkit-transition-delay: 0.2s; } .dly-1 { transition-delay: 0.1s; -webkit-transition-delay: 0.1s; } .action.anm-20 { animation-delay: 2s; -webkit-animation-delay: 2s; } .action.anm-19 { animation-delay: 1.9s; -webkit-animation-delay: 1.9s; } .action.anm-18 { animation-delay: 1.8s; -webkit-animation-delay: 1.8s; } .action.anm-17 { animation-delay: 1.7s; -webkit-animation-delay: 1.7s; } .action.anm-16 { animation-delay: 1.6s; -webkit-animation-delay: 1.6s; } .action.anm-15 { animation-delay: 1.5s; -webkit-animation-delay: 1.5s; } .action.anm-14 { animation-delay: 1.4s; -webkit-animation-delay: 1.4s; } .action.anm-13 { animation-delay: 1.3s; -webkit-animation-delay: 1.3s; } .action.anm-12 { animation-delay: 1.2s; -webkit-animation-delay: 1.2s; } .action.anm-11 { animation-delay: 1.1s; -webkit-animation-delay: 1.1s; } .action.anm-10 { animation-delay: 1s; -webkit-animation-delay: 1s; } .action.anm-9 { animation-delay: 0.9s; -webkit-animation-delay: 0.9s; } .action.anm-8 { animation-delay: 0.8s; -webkit-animation-delay: 0.8s; } .action.anm-7 { animation-delay: 0.7s; -webkit-animation-delay: 0.7s; } .action.anm-6 { animation-delay: 0.6s; -webkit-animation-delay: 0.6s; } .action.anm-5 { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; } .action.anm-4 { animation-delay: 0.4s; -webkit-animation-delay: 0.4s; } .action.anm-3 { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } .action.anm-2 { animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } .action.anm-1 { animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } } @media screen and (max-width: 1600px) { .inner { width: 86%; } } @media screen and (max-width: 1440px) { .one-iboxL .title { line-height: 1.5; } .one-iboxR-list a { font-size: 14px; } } @media screen and (max-width: 1370px) { .f16 { font-size: 14px; } } @media screen and (max-width: 1280px) { .link-select-box .mt { min-width: 180px; } .foot-erm li { margin-left: 3rem; } } @media screen and (max-width: 1181px) { .pvideo-box { width: 90%; left: 5%; } .pv-close { right: 0; top: -34px; font-size: 24px; line-height: 1; } .inner { width: 90%; } .top-nav { display: none; } .top-grop, .pageH { height: 64px; } .top-grop { padding: 0; } .top-grop-rbox { margin: 0 3%; } .top-grop-img { display: none; } .top-grop-serach { display: block; } .cq-serach { margin: 0 1rem 0 0; } .cq-serach .icon { width: 3.2rem; height: 3.2rem; } .top .inner { width: auto; } .logo { margin-left: 3%; } .logo a img { height: 38px; } .logo .txt { font-size: 14px; padding-left: 1rem; margin-left: 1rem; } .menu-handler { display: block; } .ptb120, .ptb100 { padding: 8rem 0; } .pt120, .pt100 { padding-top: 8rem; } .pb120, .pb100 { padding-bottom: 8rem; } .ptb80 { padding: 6.5rem 0; } .pt80 { padding-top: 6.5rem; } .pb80 { padding-bottom: 6.5rem; } .pt60 { padding-top: 5rem; } .pb60 { padding-bottom: 5rem; } .pt50 { padding-top: 4rem; } .pb50 { padding-bottom: 4rem; } .mt60 { margin-top: 4.5rem; } .ibox { padding: 6rem 0; } .one-ibox { display: block; } .one-iboxL { width: 100%; } .one-iboxL .swiper-slide { flex-direction: row; height: auto; } .one-iboxL .imgBox { height: 100%; width: 49%; } .one-iboxR { margin-top: auto; width: auto; margin-left: -2%; } .two-ibox-demo .swiper-pagination-bullet { width: 0.8rem; height: 0.8rem; border-radius: 50%; } .foot-ibox { display: block; } .foot { padding: 4rem 0; } .foot-erm { margin-bottom: 3rem; } .foot-erm li:first-child { margin-left: 0; } .foot-select { display: block; } .foot-select > li { margin-right: 0; } .link-select-box .mt { min-width: 0; background-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; padding: 1.5rem 0; } .link-select-box .aw { border-bottom-color: #ffffff; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom-width: 6px; transform: rotate(180deg); -webkit-transform: rotate(180deg); } .link-select-box .mc { position: relative !important; background-color: transparent; box-shadow: 0 0 0 transparent; } .link-select-box .mc a { color: #ffffff; } .link-select-box .mc ul { max-height: 100%; overflow-y: hidden; display: flex; flex-wrap: wrap; padding: 1rem 0; } .link-select-box .mc ul li { border-bottom: 0 none; margin-right: 2rem; margin-bottom: 0.5rem; } .link-select-box .mc ul a { padding: 5px 0 5px 12px; position: relative; } .link-select-box .mc ul a::before { content: ""; position: absolute; left: 0; top: 13px; width: 3px; height: 3px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; } .link-select-box.act .aw { transform: rotate(0deg); -webkit-transform: rotate(0deg); } .pbanner { height: 25vh; } .pbanner .imgBox { height: 100%; } .pbanner-desc { top: 50%; } .pbanner-desc .title { margin-bottom: 0.8rem; line-height: 1.4; } .page-cur .icon { margin-right: 1rem; } .page-cur .fg { padding: 0 0.5rem; } .page-nav-box { margin-top: 0; background-color: #f5f5f5; } .page-nav-btn a:link, .page-nav-btn a:visited { color: #333333; } .page-nav-btn a:active, .page-nav-btn a:hover { color: #333333; } .page-nav-btn { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; white-space: nowrap; width: 100%; } .page-nav-btn li { margin: 0; padding-left: 5%; } .page-nav-btn li:last-child { padding-right: 5%; } .page-nav-btn a { height: 5rem; line-height: 5rem; font-size: 14px; } .page-nav-btn a::before { bottom: -1px; display: none; } .page-nav-btn a.active { color: #1EA7DB; } .ptitle { padding-bottom: 2rem; } .student-list > li { padding: 4rem 0; } .student-list .imgBox { width: 32%; padding-bottom: 30%; } .student-list .title, .student-list .c { margin-bottom: 2rem; } .internship-list > li { padding: 4rem 0; } .internship-list .title { margin-bottom: 1rem; line-height: 1.4; } .professional-list li { width: 47%; } .pbanner-desc2 { padding: 3rem 0 10rem; } .ifor-title { padding-bottom: 1rem; margin-bottom: 2rem; } .ifor-nav a { margin-right: 2rem; } .ifive-swiper .item { box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .ifive-swiper .title { padding: 2rem 2.5rem; } .ifive-swiper .time { padding: 0 2.5rem 2.5rem; } .page-nav2-list li { margin-bottom: 1rem; margin-right: 1rem; } .page-nav2-list a { padding: 0.5rem 1rem; } } @media screen and (max-width: 820px) { .cq-serach-desc { width: 90%; } .cq-serach-desc .txt-box { margin-left: 1rem; } .cq-serach-desc .serach-btn { width: 9rem; } .ifor-warp1 { display: block; } .ifor-wl1 { width: auto; } .ifor-wr1 { width: auto; margin-top: 3rem; } .video-list li { width: 46%; } } @media screen and (max-width: 640px) { .top-grop, .pageH { height: 58px; } .logo a img { height: 32px; } .logo .txt { font-size: 1rem; padding-left: 0.8rem; margin-left: 0.8rem; } .foot-erm { margin-bottom: 2.5rem; } .foot-erm .txt { padding-top: 0.8rem; font-size: 12px; } .link-select-box .mt { padding: 1rem 0; font-size: 13px; } .foot-select { margin-bottom: 2.5rem; } .foot-txt { font-size: 12px; } .ptb120, .ptb100 { padding: 6rem 0; } .pt120, .pt100 { padding-top: 6rem; } .pb120, .pb100 { padding-bottom: 6rem; } .ptb80 { padding: 5.5rem 0; } .pt80 { padding-top: 5rem; } .pb80 { padding-bottom: 5rem; } .pt60 { padding-top: 4.5rem; } .pb60 { padding-bottom: 4.5rem; } .pt50 { padding-top: 3.5rem; } .pb50 { padding-bottom: 3.5rem; } .mt60 { margin-top: 3rem; } .one-iboxL .swiper-slide { display: block; } .one-iboxL .imgBox { width: 100%; height: 20rem; } .one-iboxL .time { margin-bottom: 0.5rem; } .one-iboxL .desc { padding: 20px 5%; } .one-iboxR { display: block; margin-left: 0; } .ititle { padding-top: 2.2rem; padding-bottom: 1.2rem; } .one-iboxR-item { width: auto; margin-left: auto; } .one-iboxR-item .ititle { margin: 0 5% 1rem; } .one-iboxR-item .one-iboxR-list { margin: 0 5%; } .two-ibox-demo { overflow: inherit; } .two-ibox-demo .swiper-pag { display: none; } .page-cur { font-size: 12px; } .ptitle { padding-bottom: 1.5rem; } .student-list > li { padding: 3rem 0; } .student-list .imgBox { width: 45%; } .student-list .title { margin-bottom: 1rem; } .student-list .c { display: none; } .internship-list > li { padding: 3rem 0; align-items: normal; } .internship-list .cq-timebox { width: 8rem; min-height: auto; margin-right: 1.5rem; } .cq-timebox .txt { font-size: 12px; } .paging a, .paging span { margin: 0 0.8rem; } .pbanner-desc2 { padding: 2.5rem 0 6rem; } .info-page { padding: 3.5rem 0 5rem; width: auto; } .info-tbox { margin-bottom: 3rem; padding-bottom: 2.5rem; } .info-tbox .time { margin-top: 1rem; } .info-page2 { padding: 3.5rem 0 5rem; width: auto; } .join-list a { padding: 1.5rem; display: block; } .join-list .txt { margin-bottom: 0.5rem; } .join-list .time { font-size: 12px; margin-left: 0; } .page-nav2 { position: relative; padding-bottom: 1rem; } .page-nav2::before { content: ""; position: absolute; left: 0; bottom: -1px; width: 21.5%; height: 2px; background-color: #35C5FB; } .page-nav2-list li { display: none; } .page-nav2-list li.active { display: block; } .page-nav2-list li.active a { background-color: transparent; color: #333333; padding: 0; border-radius: 0; border: 0 none; font-size: 1.8rem; } } @media screen and (max-width: 480px) { .student-list > li { padding: 2.5rem 0; display: block; } .student-list .imgBox { width: 100%; margin-bottom: 2rem; padding-bottom: 70%; } .student-list .c { display: none; } .professional-list { margin-left: 0; } .professional-list li { width: 100%; margin-left: 0; } .ranks-info { display: block; } .ranks-info .imgBox { width: auto; margin-right: 0; margin-bottom: 2rem; } .video-list { margin-left: 0; margin-top: 0; } .video-list li { width: 100%; margin-left: 0; margin-top: 2.5rem; } .video-list li:first-child { margin-top: 0; } }