@charset "utf-8"; @font-face { font-family: 'HanYiZhongYuanJian'; src: url("../fonts/HanYiZhongYuanJian-1.ttf"); } @font-face { font-family: 'Krub-Bold'; src: url("../fonts/Krub-Bold.ttf"); } .font-12 { font-size: 12px; } .font-14, .footer .left-box p, .footer .form .s-box i, .footer .form .s-box a, .cookie p, .c-crumbs a, .investor-s2 .box span, .investor-s2 .box .tip, .media-s7 .item .top-box span, .portfolio-s2 .table .box .cate span { font-size: 14px; } .font-16, .fixed-search input, .fixed-search .link a, .cookie a, .c-subnav a, .comm-page li a, .text-modal .para, .search-s1 .form input, .search-s1 .link a, .search-s1 .item span, .search-s1 .item p, .about-s2 .item .tip, .about-s7 .pagination span, .about-s10 .r-box span, .responsibility-s5 .box .info-txt p, .responsibility-s7 .item p, .responsibility-s8 .info-txt p, .responsibility-s9 .item .para, .responsibility-s12 .item p, .responsibility-s15 .item .btns a, .career-s2 .filter .year-box span, .career-s2 .filter .year-box .hide a, .career-s2 .filter .form input, .career-s3 .item p, .career-s4 .item p, .career-s5 .item .info span, .career-s5 .item p, .career-s5 .item a, .career-s6 .info span, .career-s7 .item .para, .career-s8 .item .para, .investor-s3 .item p, .investor-s6 .item .s-date, .investor-s6 .item p, .media-s1 .filter .form input, .media-s1 .filter .year-box span, .media-s1 .filter .year-box .hide a, .media-s1 .item .date, .media-s1 .item p, .media-s2 .top-block .date, .media-s4 .para, .media-s5 .item span, .media-s5 .para, .media-s6 .item .hide span, .media-s6 .para, .media-s7 .item .date, .media-s7 .para, .portfolio-s2 .table .top-box i, .portfolio-s2 .table .top-box span, .portfolio-s2 .table .box .cate span i, .portfolio-s2 .table .item span, .portfolio-s4 .table .bot-box span, .portfolio-s4 .b-para, .contact-s1 .tab-cont .box span, .contact-s2 .info p, .contact-s3 .item .tit, .contact-s3 input, .contact-s3 textarea, .contact-s3 .maxl { font-size: 1rem; } .font-18, .footer .bot-block .link a, .team-pop .tip, .team-pop .para, .about-s5 .item p, .about-s5 a.more, .about-s6 a.more, .about-s7 .item .para, .about-s7 a.more, .about-s8 a.more, .about-s9 a.more, .responsibility-s10 .item p, .responsibility-s15 .single .btns a, .investor-s1 a.more, .investor-s2 .box .s-tit, .investor-s2 .n-box a, .investor-s3 a.more, .investor-s4 a.more, .investor-s6 .link a, .investor-s7 .item .btns a, .investor-s12 a.more, .media-s7 .link a, .other-s3 .item .link a, .index-s1 .item a, .index-s2 a.more, .index-s3 a, .index-s4 .info-box p, .index-s5 .show a.more, .index-s5 .hide a.more, .index-s6 a.more, .index-s7 a, .index-s8 .btn a { font-size: 1.125rem; } .font-20, .header li a.single, .header li .subnav .link a span, .header .info span, .footer .nav .tit, .footer .nav .link a, .footer .right-box span, .search-s1 .item .tit, .about-s1 .item .para, .about-s1 .item .info, .about-s2 .item .tit, .about-s3 .item .para, .about-s4 .para, .about-s4 .item .tit, .about-s5 .para, .about-s8 .item .tit, .about-s9 .para, .about-s9 .flex a span, .responsibility-s1 .para, .responsibility-s1 .item p, .responsibility-s2 .para, .responsibility-s3 .para, .responsibility-s4 .flex a span, .responsibility-s5 .para, .responsibility-s6 .b-para, .responsibility-s6 .item .tit, .responsibility-s7 .para, .responsibility-s9 .b-para, .responsibility-s10 .para, .responsibility-s11 .flex a span, .responsibility-s12 .b-para, .responsibility-s12 .item .tit, .responsibility-s13 .para, .responsibility-s14 .para, .responsibility-s14 .flex p, .responsibility-s14 .flex a span, .responsibility-s15 .para, .career-s4 .item .tit, .career-s6 .item .para, .career-s6 .tips, .investor-s1 .para, .investor-s1 .item p, .investor-s1 .item .num i, .investor-s2 .link a span, .investor-s2 .n-box-1 .para, .investor-s5 .para, .investor-s8 .para, .investor-s10 .para, .investor-s10 table td, .investor-s11 .item .tit, .investor-s11 .item .info span, .investor-s11 .item .info .para, .media-s1 .item .tit, .media-s2 .bot-block .item .tit, .media-s3 a span, .media-s4 .txt-box a, .media-s7 .item .tit, .portfolio-s1 .item .para, .portfolio-s3 .item .para, .portfolio-s4 .table .top-box span, .portfolio-s5 .top-para, .portfolio-s5 .bot-para p, .portfolio-s5 .bot-para p:before, .portfolio-s5 .bot-para .tip, .portfolio-s6 .item p, .portfolio-s6 .tip, .portfolio-s7 .para, .other-s1 .top-para, .other-s1 .top-list span, .other-s1 .top-list .para, .other-s1 .block .para, .other-s2 .block .para, .contact-s1 .para, .contact-s1 .tab-cont .box p { font-size: 1.25rem; } .font-22 { font-size: 1.375rem; } .font-24, .fixed-search .tips, .cookie span, .about-s6 .tab-cont .para, .about-s6 .tab-tit .item span, .about-s10 .item .para, .responsibility-s5 .box .info-txt span, .responsibility-s7 .item .tit, .responsibility-s8 .info-txt span, .responsibility-s9 .item .tit, .responsibility-s10 .item .tit, .responsibility-s15 .item span, .career-s3 .item span, .career-s5 .item .tit, .career-s6 .item .tit span, .career-s6 a.apply, .career-s7 .item .tit, .career-s8 .item .tit, .investor-s2 .n-box span, .investor-s3 .item .date i, .investor-s3 .item .tit, .investor-s6 .item .date i, .investor-s6 .item .tit, .investor-s9 .para, .investor-s11 .label, .investor-s12 .item .date i, .investor-s12 .item .tit, .portfolio-s1 .item .para span, .portfolio-s6 .item span, .contact-s1 .tab-tit span, .contact-s2 .info span, .contact-s3 button, .index-s2 .para, .index-s4 .top-box p, .index-s4 .info-box .tit, .index-s5 .para, .index-s6 .top-box p, .index-s6 .item span, .index-s7 .para, .index-s8 .top-box p { font-size: 1.5rem; } .font-30 { font-size: 1.875rem; } .font-32, .text-modal .tit, .search-s1 .tips, .about-s1 .item .tit span, .about-s3 .item .tit span, .about-s7 .item .tit, .responsibility-s2 .item .tit, .responsibility-s5 .box .tit, .responsibility-s8 .tit, .responsibility-s13 .item .tit, .responsibility-s15 .single .tit, .investor-s2 .box .tit, .investor-s2 .box .stock, .investor-s2 .n-box-1 .tit, .investor-s4 .item span, .media-s5 .item .tit, .portfolio-s2 .c-label .tit, .other-s1 .block .tit, .other-s2 .block .tit span, .other-s3 .item .tit { font-size: 2rem; } .font-36, .team-pop .tit, .about-s3 .item.active .tit span, .career-s1 .c-label .tit, .career-s2 .c-label .tit, .investor-s7 .item .tit, .media-s4 .txt-box span, .portfolio-s3 .item .tit span, .portfolio-s4 .c-label .tit, .portfolio-s5 .c-label .tit, .portfolio-s6 .c-label .tit, .portfolio-s7 .c-label .tit { font-size: 2.25rem; } .font-40, .investor-s12 .item .date span { font-size: 2.5rem; } .font-48, .header li .subnav .tit, .c-label .tit, .about-s10 .item span, .career-s6 .label, .media-s2 .top-block .tit, .index-s1 .item p, .index-s8 .tit { font-size: 3rem; } .font-60, .search-s1 .label, .about-s4 .center-box:after, .responsibility-s13 .item span, .investor-s1 .item .num span, .investor-s3 .item .date span, .investor-s6 .item .date span, .index-s2 .tit, .index-s3 .tit, .index-s4 .top-box .tit, .index-s5 .tit, .index-s6 .top-box .tit, .index-s7 .tit, .index-s8 .top-box .tit { font-size: 3.75rem; } .font-70 { font-size: 4.375rem; } .font-80, .fixed-search .label, .c-banner .tit, .index-s1 .item span, .index-s1 .item .tip { font-size: 5rem; } .font-90, .investor-s2 .box .price { font-size: 5.625rem; } .font-100 { font-size: 6.25rem; } .font-120 { font-size: 7.5rem; } @keyframes o-upfade-top { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes o-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes scale-bg { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } @keyframes indexsvg { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } } @keyframes ani-scaleX { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } @keyframes banner-ani { 0% { top: 0; } 90%,100% { top: 100%; } } @media screen and (min-width: 1025px) { .wow { visibility: hidden; } } @media screen and (min-width: 1025px) { .dom-loaded .header { transition: all .3s ease; } .dom-loaded .header .logo img { transition: all .3s ease; } .dom-loaded .header li a.single { transition: all .3s ease; } } .header { position: fixed; top: 0; left: 0; width: 100%; padding: 0 3.75rem; display: flex; justify-content: space-between; align-items: center; font-size: 0; z-index: 9; } .header:hover, .header.down { background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05); } .header.down .logo img { height: 3.375rem; } .header.down li a.single { line-height: 6.25rem; } .header .logo { display: inline-block; vertical-align: middle; } .header .logo img { display: block; height: 4.5rem; } .header ul { display: inline-block; vertical-align: middle; } .header li { display: inline-block; vertical-align: top; } .header li a.single { display: block; line-height: 8.125rem; color: #42474e; position: relative; padding: 0 1.25rem; z-index: 2; } .header li a.single:after { content: ''; width: 100%; height: 2px; background-color: #00639d; position: absolute; left: 0; bottom: 0; transform: scaleX(0); } .header li .subnav { position: absolute; top: calc(100% - 1px); left: 0; right: 0; background: #fff url("../images/img-5.png") center bottom no-repeat; background-size: 100% auto; border-top: 1px solid #e6e6e6; padding: 5.625rem; font-size: 0; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05); opacity: 0; visibility: hidden; } .header li .subnav .left-box { width: 43.34%; display: inline-block; vertical-align: top; } .header li .subnav .tit { color: #42474e; padding: 0 1.875rem; margin-top: -1rem; } .header li .subnav .link { margin-top: 1.5rem; } .header li .subnav .link a { display: block; width: 27.5rem; position: relative; margin-top: 5px; } .header li .subnav .link a:nth-of-type(1) { margin-top: 0; } .header li .subnav .link a:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 5px; background-image: url("../images/img-3.jpg"); z-index: 1; opacity: 0; transition: opacity .3s ease; } .header li .subnav .link a:after { content: ''; width: 5px; height: 9px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/icon-1.svg"); position: absolute; right: 1.875rem; top: 50%; margin-top: -5px; z-index: 3; opacity: 0; transition: opacity .3s ease; } .header li .subnav .link a span { display: block; padding: 0 1.875rem; line-height: 3.375rem; color: #42474e; position: relative; z-index: 2; transition: color .3s ease; } @media (any-hover: hover) { .header li .subnav .link a:hover:before, .header li .subnav .link a:hover:after { opacity: 1; } .header li .subnav .link a:hover span { color: #fff; } } .header li .subnav .right-box { width: 56.66%; display: inline-block; vertical-align: top; border-radius: 10px; overflow: hidden; } .header li .subnav .right-box img { display: block; width: 100%; } @media screen and (min-width: 1025px) { .header li.active a.single:after { transform: scaleX(1); transition: transform .3s ease; } } @media (any-hover: hover) { .header li:hover a.single:after { transform: scaleX(1); transition: transform .3s ease; } .header li:hover .subnav { opacity: 1; visibility: visible; transition: all .3s ease; } } .header .info { display: inline-block; vertical-align: middle; font-size: 0; position: relative; margin-left: 1.25rem; padding-left: 2.5rem; } .header .info:before { content: ''; width: 1px; height: 16px; background-color: rgba(15, 30, 52, 0.2); position: absolute; left: 0; top: 50%; margin-top: -8px; } .header .info span { color: #42474e; } .header .info span:before { content: ''; width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .header .search, .header .global { display: inline-block; vertical-align: middle; } .header .search span, .header .global span { cursor: pointer; } .header .search span:before { background-image: url("../images/search.svg"); } .header .global { margin-left: 3.75rem; position: relative; } .header .global span:before { background-image: url("../images/global.svg"); } .header .global .hide { position: absolute; width: 90px; top: 100%; left: 50%; margin-left: -45px; padding-top: 24px; opacity: 0; visibility: hidden; } .header .global .hide:before { content: ''; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #fff; display: block; margin: 0 auto; position: relative; z-index: 2; } .header .global .hide .box { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); border-radius: 5px; overflow: hidden; } .header .global .hide a { display: block; font-size: 12px; line-height: 30px; color: #333; text-align: center; background-color: #fff; transition: all .3s ease; } @media screen and (min-width: 1025px) { .header .global .hide a:hover { background-color: #00639d; color: #fff; } } .header .global:hover .hide { opacity: 1; visibility: visible; } .fixed-search { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10; background-color: #00639d; display: none; } .fixed-search .close { width: 60px; height: 60px; background-position: center; background-repeat: no-repeat; background-size: contain; background-color: rgba(255, 255, 255, 0.3); border-radius: 50%; background-image: url("../images/close-1.svg"); background-size: auto 1.5rem; position: absolute; top: 3.125vw; right: 3.125vw; cursor: pointer; z-index: 3; } .fixed-search .main { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; } .fixed-search .box { width: 90%; max-width: 960px; margin: 0 auto; } .fixed-search .label { text-align: center; color: #fff; text-transform: uppercase; margin-bottom: 4.5vw; } .fixed-search input { display: block; width: 100%; height: 6.25rem; border-bottom: 4px solid #fff; background-color: transparent; padding: 0 1.875rem; color: rgba(255, 255, 255, 0.5); } .fixed-search input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); } .fixed-search input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); } .fixed-search input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); } .fixed-search .tips { color: #fff; margin-top: 2vw; } .fixed-search .link { margin-top: 1.25rem; font-size: 0; } .fixed-search .link a { display: inline-block; vertical-align: top; background-color: rgba(255, 255, 255, 0.2); line-height: 2.5rem; color: #fff; padding: 0 1.875rem; margin-right: 10px; transition: all .3s ease; } .fixed-search .link a:last-of-type { margin-right: 0; } @media screen and (min-width: 1025px) { .fixed-search .link a:hover { background-color: #fff; color: #00639d; } } .head-null { height: 6.25rem; } .footer { background-position: center top; background-repeat: no-repeat; background-image: url("../images/img-1.png"); background-size: 100% auto; } .footer .top-block { padding: 5.625rem 0 3.75rem; position: relative; } .footer .top-block .flex { display: flex; justify-content: space-between; align-items: flex-start; } .footer .totop { width: 90px; height: 90px; position: fixed; right: 3.75rem; bottom: 3.75rem; background: #00639d url("../images/totop.svg") center center no-repeat; background-size: auto 12px; border-radius: 50%; z-index: 10; cursor: pointer; opacity: 0; visibility: hidden; transition: all .3s ease; } .footer .totop svg { position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; fill: none; stroke: #fff; stroke-width: 1px; stroke-dasharray: 268; stroke-dashoffset: 268; transform: rotate(-90deg); } .footer .totop.active { opacity: 1; visibility: visible; } .footer .left-box { width: 30rem; } .footer .left-box img { display: block; height: 3.375rem; } .footer .left-box .para { margin-top: 2rem; } .footer .left-box p { color: #42474e; line-height: 24px; margin-top: 1.5rem; } .footer .left-box p:nth-of-type(1) { margin-top: 0; } .footer .nav .tit { color: #42474e; font-weight: bold; } .footer .nav .link { margin-top: 2rem; } .footer .nav .link a { display: block; color: #42474e; margin-top: 1.5rem; transition: color .3s ease; } .footer .nav .link a:nth-of-type(1) { margin-top: 0; } @media (any-hover: hover) { .footer .nav .link a:hover { color: #00639d; } } .footer .right-box { width: 30rem; } .footer .right-box span { color: #42474e; font-weight: bold; } .footer .form .s-box { margin-top: 1rem; position: relative; width: 100%; height: 54px; } .footer .form .s-box i { display: block; width: 100%; height: 100%; border: 1px solid #e6e6e6; background-color: transparent; padding: 0 1.25rem; line-height: 52px; font-style: normal; color: #42474e; } .footer .form .s-box a { position: absolute; right: 3px; top: 3px; width: 120px; height: calc(100% - 6px); background-color: #00639d; border-radius: 3px; line-height: 48px; color: #fff; text-align: center; cursor: pointer; } .footer .share { margin-top: 3.75rem; } .footer .share .ewm { width: 9.375rem; border: 1px solid #e6e6e6; margin-top: 1rem; } .footer .share .ewm img { display: block; width: 100%; } .footer .bot-block { border-top: 1px solid #e6e6e6; padding: 2.5rem 0; } .footer .bot-block .flex { display: flex; justify-content: space-between; align-items: flex-start; } .footer .bot-block .link { font-size: 0; } .footer .bot-block .link a { display: inline-block; vertical-align: top; color: #42474e; margin-right: 1.5rem; transition: color .3s ease; } .footer .bot-block .link a:last-of-type { margin-right: 0; } @media (any-hover: hover) { .footer .bot-block .link a:hover { color: #00639d; } } .cookie { position: fixed; bottom: 0; left: 0; width: 100%; height: 100%; font-size: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 11; display: none; } .cookie .main { position: absolute; bottom: 0; left: 0; right: 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/img-4.jpg"); padding: 2.5rem 3.75rem; font-size: 0; } .cookie .close { width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/close.svg"); position: absolute; right: 2rem; top: 2rem; cursor: pointer; transition: transform .3s ease; } @media (any-hover: hover) { .cookie .close:hover { transform: rotate(90deg); } } .cookie .txt { display: inline-block; vertical-align: bottom; width: 50%; } .cookie span { display: block; color: #42474e; } .cookie p { color: #42474e; line-height: 20px; margin-top: 10px; } .cookie .link { display: inline-block; vertical-align: bottom; margin-left: 15rem; } .cookie a { display: inline-block; vertical-align: top; width: 180px; line-height: 48px; color: #fff; text-align: center; border-radius: 5px; } .cookie a:nth-of-type(1) { background-color: #00639d; } .cookie a:nth-of-type(2) { background-color: #00a0e9; margin-left: 10px; } @media screen and (max-width: 1800px) { html { font-size: 15px; } } @media screen and (max-width: 1681px) { html { font-size: 14px; } .font-20, .header li a.single, .header li .subnav .link a span, .header .info span, .footer .nav .tit, .footer .nav .link a, .footer .right-box span, .search-s1 .item .tit, .about-s1 .item .para, .about-s1 .item .info, .about-s2 .item .tit, .about-s3 .item .para, .about-s4 .para, .about-s4 .item .tit, .about-s5 .para, .about-s8 .item .tit, .about-s9 .para, .about-s9 .flex a span, .responsibility-s1 .para, .responsibility-s1 .item p, .responsibility-s2 .para, .responsibility-s3 .para, .responsibility-s4 .flex a span, .responsibility-s5 .para, .responsibility-s6 .b-para, .responsibility-s6 .item .tit, .responsibility-s7 .para, .responsibility-s9 .b-para, .responsibility-s10 .para, .responsibility-s11 .flex a span, .responsibility-s12 .b-para, .responsibility-s12 .item .tit, .responsibility-s13 .para, .responsibility-s14 .para, .responsibility-s14 .flex p, .responsibility-s14 .flex a span, .responsibility-s15 .para, .career-s4 .item .tit, .career-s6 .item .para, .career-s6 .tips, .investor-s1 .para, .investor-s1 .item p, .investor-s1 .item .num i, .investor-s2 .link a span, .investor-s2 .n-box-1 .para, .investor-s5 .para, .investor-s8 .para, .investor-s10 .para, .investor-s10 table td, .investor-s11 .item .tit, .investor-s11 .item .info span, .investor-s11 .item .info .para, .media-s1 .item .tit, .media-s2 .bot-block .item .tit, .media-s3 a span, .media-s4 .txt-box a, .media-s7 .item .tit, .portfolio-s1 .item .para, .portfolio-s3 .item .para, .portfolio-s4 .table .top-box span, .portfolio-s5 .top-para, .portfolio-s5 .bot-para p, .portfolio-s5 .bot-para p:before, .portfolio-s5 .bot-para .tip, .portfolio-s6 .item p, .portfolio-s6 .tip, .portfolio-s7 .para, .other-s1 .top-para, .other-s1 .top-list span, .other-s1 .top-list .para, .other-s1 .block .para, .other-s2 .block .para, .contact-s1 .para, .contact-s1 .tab-cont .box p { font-size: 18px; } .font-18, .footer .bot-block .link a, .team-pop .tip, .team-pop .para, .about-s5 .item p, .about-s5 a.more, .about-s6 a.more, .about-s7 .item .para, .about-s7 a.more, .about-s8 a.more, .about-s9 a.more, .responsibility-s10 .item p, .responsibility-s15 .single .btns a, .investor-s1 a.more, .investor-s2 .box .s-tit, .investor-s2 .n-box a, .investor-s3 a.more, .investor-s4 a.more, .investor-s6 .link a, .investor-s7 .item .btns a, .investor-s12 a.more, .media-s7 .link a, .other-s3 .item .link a, .index-s1 .item a, .index-s2 a.more, .index-s3 a, .index-s4 .info-box p, .index-s5 .show a.more, .index-s5 .hide a.more, .index-s6 a.more, .index-s7 a, .index-s8 .btn a { font-size: 16px; } } @media screen and (max-width: 1441px) { html { font-size: 13px; } .font-22 { font-size: 18px; } .font-20, .header li a.single, .header li .subnav .link a span, .header .info span, .footer .nav .tit, .footer .nav .link a, .footer .right-box span, .search-s1 .item .tit, .about-s1 .item .para, .about-s1 .item .info, .about-s2 .item .tit, .about-s3 .item .para, .about-s4 .para, .about-s4 .item .tit, .about-s5 .para, .about-s8 .item .tit, .about-s9 .para, .about-s9 .flex a span, .responsibility-s1 .para, .responsibility-s1 .item p, .responsibility-s2 .para, .responsibility-s3 .para, .responsibility-s4 .flex a span, .responsibility-s5 .para, .responsibility-s6 .b-para, .responsibility-s6 .item .tit, .responsibility-s7 .para, .responsibility-s9 .b-para, .responsibility-s10 .para, .responsibility-s11 .flex a span, .responsibility-s12 .b-para, .responsibility-s12 .item .tit, .responsibility-s13 .para, .responsibility-s14 .para, .responsibility-s14 .flex p, .responsibility-s14 .flex a span, .responsibility-s15 .para, .career-s4 .item .tit, .career-s6 .item .para, .career-s6 .tips, .investor-s1 .para, .investor-s1 .item p, .investor-s1 .item .num i, .investor-s2 .link a span, .investor-s2 .n-box-1 .para, .investor-s5 .para, .investor-s8 .para, .investor-s10 .para, .investor-s10 table td, .investor-s11 .item .tit, .investor-s11 .item .info span, .investor-s11 .item .info .para, .media-s1 .item .tit, .media-s2 .bot-block .item .tit, .media-s3 a span, .media-s4 .txt-box a, .media-s7 .item .tit, .portfolio-s1 .item .para, .portfolio-s3 .item .para, .portfolio-s4 .table .top-box span, .portfolio-s5 .top-para, .portfolio-s5 .bot-para p, .portfolio-s5 .bot-para p:before, .portfolio-s5 .bot-para .tip, .portfolio-s6 .item p, .portfolio-s6 .tip, .portfolio-s7 .para, .other-s1 .top-para, .other-s1 .top-list span, .other-s1 .top-list .para, .other-s1 .block .para, .other-s2 .block .para, .contact-s1 .para, .contact-s1 .tab-cont .box p { font-size: 16px; } .font-18, .footer .bot-block .link a, .team-pop .tip, .team-pop .para, .about-s5 .item p, .about-s5 a.more, .about-s6 a.more, .about-s7 .item .para, .about-s7 a.more, .about-s8 a.more, .about-s9 a.more, .responsibility-s10 .item p, .responsibility-s15 .single .btns a, .investor-s1 a.more, .investor-s2 .box .s-tit, .investor-s2 .n-box a, .investor-s3 a.more, .investor-s4 a.more, .investor-s6 .link a, .investor-s7 .item .btns a, .investor-s12 a.more, .media-s7 .link a, .other-s3 .item .link a, .index-s1 .item a, .index-s2 a.more, .index-s3 a, .index-s4 .info-box p, .index-s5 .show a.more, .index-s5 .hide a.more, .index-s6 a.more, .index-s7 a, .index-s8 .btn a { font-size: 14px; } .font-16, .fixed-search input, .fixed-search .link a, .cookie a, .c-subnav a, .comm-page li a, .text-modal .para, .search-s1 .form input, .search-s1 .link a, .search-s1 .item span, .search-s1 .item p, .about-s2 .item .tip, .about-s7 .pagination span, .about-s10 .r-box span, .responsibility-s5 .box .info-txt p, .responsibility-s7 .item p, .responsibility-s8 .info-txt p, .responsibility-s9 .item .para, .responsibility-s12 .item p, .responsibility-s15 .item .btns a, .career-s2 .filter .year-box span, .career-s2 .filter .year-box .hide a, .career-s2 .filter .form input, .career-s3 .item p, .career-s4 .item p, .career-s5 .item .info span, .career-s5 .item p, .career-s5 .item a, .career-s6 .info span, .career-s7 .item .para, .career-s8 .item .para, .investor-s3 .item p, .investor-s6 .item .s-date, .investor-s6 .item p, .media-s1 .filter .form input, .media-s1 .filter .year-box span, .media-s1 .filter .year-box .hide a, .media-s1 .item .date, .media-s1 .item p, .media-s2 .top-block .date, .media-s4 .para, .media-s5 .item span, .media-s5 .para, .media-s6 .item .hide span, .media-s6 .para, .media-s7 .item .date, .media-s7 .para, .portfolio-s2 .table .top-box i, .portfolio-s2 .table .top-box span, .portfolio-s2 .table .box .cate span i, .portfolio-s2 .table .item span, .portfolio-s4 .table .bot-box span, .portfolio-s4 .b-para, .contact-s1 .tab-cont .box span, .contact-s2 .info p, .contact-s3 .item .tit, .contact-s3 input, .contact-s3 textarea, .contact-s3 .maxl { font-size: 14px; } .font-14, .footer .left-box p, .footer .form .s-box i, .footer .form .s-box a, .cookie p, .c-crumbs a, .investor-s2 .box span, .investor-s2 .box .tip, .media-s7 .item .top-box span, .portfolio-s2 .table .box .cate span { font-size: 14px; } } @media screen and (max-width: 1367px) { html { font-size: 12px; } } @media screen and (max-width: 1281px) { html { font-size: 10px; } .font-24, .fixed-search .tips, .cookie span, .about-s6 .tab-cont .para, .about-s6 .tab-tit .item span, .about-s10 .item .para, .responsibility-s5 .box .info-txt span, .responsibility-s7 .item .tit, .responsibility-s8 .info-txt span, .responsibility-s9 .item .tit, .responsibility-s10 .item .tit, .responsibility-s15 .item span, .career-s3 .item span, .career-s5 .item .tit, .career-s6 .item .tit span, .career-s6 a.apply, .career-s7 .item .tit, .career-s8 .item .tit, .investor-s2 .n-box span, .investor-s3 .item .date i, .investor-s3 .item .tit, .investor-s6 .item .date i, .investor-s6 .item .tit, .investor-s9 .para, .investor-s11 .label, .investor-s12 .item .date i, .investor-s12 .item .tit, .portfolio-s1 .item .para span, .portfolio-s6 .item span, .contact-s1 .tab-tit span, .contact-s2 .info span, .contact-s3 button, .index-s2 .para, .index-s4 .top-box p, .index-s4 .info-box .tit, .index-s5 .para, .index-s6 .top-box p, .index-s6 .item span, .index-s7 .para, .index-s8 .top-box p { font-size: 16px; } .font-22 { font-size: 16px; } } @media screen and (max-width: 1025px) { html { font-size: 10px; } .font-120 { font-size: 6rem; } .font-100 { font-size: 4rem; } .font-90, .investor-s2 .box .price { font-size: 3.6rem; } .font-80, .fixed-search .label, .c-banner .tit, .index-s1 .item span, .index-s1 .item .tip { font-size: 3.2rem; } .font-70 { font-size: 2.8rem; } .font-60, .search-s1 .label, .about-s4 .center-box:after, .responsibility-s13 .item span, .investor-s1 .item .num span, .investor-s3 .item .date span, .investor-s6 .item .date span, .index-s2 .tit, .index-s3 .tit, .index-s4 .top-box .tit, .index-s5 .tit, .index-s6 .top-box .tit, .index-s7 .tit, .index-s8 .top-box .tit { font-size: 2.4rem; } .font-48, .header li .subnav .tit, .c-label .tit, .about-s10 .item span, .career-s6 .label, .media-s2 .top-block .tit, .index-s1 .item p, .index-s8 .tit { font-size: 2rem; } .font-40, .investor-s12 .item .date span { font-size: 2rem; } .font-36, .team-pop .tit, .about-s3 .item.active .tit span, .career-s1 .c-label .tit, .career-s2 .c-label .tit, .investor-s7 .item .tit, .media-s4 .txt-box span, .portfolio-s3 .item .tit span, .portfolio-s4 .c-label .tit, .portfolio-s5 .c-label .tit, .portfolio-s6 .c-label .tit, .portfolio-s7 .c-label .tit { font-size: 2rem; } .font-32, .text-modal .tit, .search-s1 .tips, .about-s1 .item .tit span, .about-s3 .item .tit span, .about-s7 .item .tit, .responsibility-s2 .item .tit, .responsibility-s5 .box .tit, .responsibility-s8 .tit, .responsibility-s13 .item .tit, .responsibility-s15 .single .tit, .investor-s2 .box .tit, .investor-s2 .box .stock, .investor-s2 .n-box-1 .tit, .investor-s4 .item span, .media-s5 .item .tit, .portfolio-s2 .c-label .tit, .other-s1 .block .tit, .other-s2 .block .tit span, .other-s3 .item .tit { font-size: 1.8rem; } .font-30 { font-size: 1.8rem; } .font-24, .fixed-search .tips, .cookie span, .about-s6 .tab-cont .para, .about-s6 .tab-tit .item span, .about-s10 .item .para, .responsibility-s5 .box .info-txt span, .responsibility-s7 .item .tit, .responsibility-s8 .info-txt span, .responsibility-s9 .item .tit, .responsibility-s10 .item .tit, .responsibility-s15 .item span, .career-s3 .item span, .career-s5 .item .tit, .career-s6 .item .tit span, .career-s6 a.apply, .career-s7 .item .tit, .career-s8 .item .tit, .investor-s2 .n-box span, .investor-s3 .item .date i, .investor-s3 .item .tit, .investor-s6 .item .date i, .investor-s6 .item .tit, .investor-s9 .para, .investor-s11 .label, .investor-s12 .item .date i, .investor-s12 .item .tit, .portfolio-s1 .item .para span, .portfolio-s6 .item span, .contact-s1 .tab-tit span, .contact-s2 .info span, .contact-s3 button, .index-s2 .para, .index-s4 .top-box p, .index-s4 .info-box .tit, .index-s5 .para, .index-s6 .top-box p, .index-s6 .item span, .index-s7 .para, .index-s8 .top-box p { font-size: 1.6rem; } .font-20, .header li a.single, .header li .subnav .link a span, .header .info span, .footer .nav .tit, .footer .nav .link a, .footer .right-box span, .search-s1 .item .tit, .about-s1 .item .para, .about-s1 .item .info, .about-s2 .item .tit, .about-s3 .item .para, .about-s4 .para, .about-s4 .item .tit, .about-s5 .para, .about-s8 .item .tit, .about-s9 .para, .about-s9 .flex a span, .responsibility-s1 .para, .responsibility-s1 .item p, .responsibility-s2 .para, .responsibility-s3 .para, .responsibility-s4 .flex a span, .responsibility-s5 .para, .responsibility-s6 .b-para, .responsibility-s6 .item .tit, .responsibility-s7 .para, .responsibility-s9 .b-para, .responsibility-s10 .para, .responsibility-s11 .flex a span, .responsibility-s12 .b-para, .responsibility-s12 .item .tit, .responsibility-s13 .para, .responsibility-s14 .para, .responsibility-s14 .flex p, .responsibility-s14 .flex a span, .responsibility-s15 .para, .career-s4 .item .tit, .career-s6 .item .para, .career-s6 .tips, .investor-s1 .para, .investor-s1 .item p, .investor-s1 .item .num i, .investor-s2 .link a span, .investor-s2 .n-box-1 .para, .investor-s5 .para, .investor-s8 .para, .investor-s10 .para, .investor-s10 table td, .investor-s11 .item .tit, .investor-s11 .item .info span, .investor-s11 .item .info .para, .media-s1 .item .tit, .media-s2 .bot-block .item .tit, .media-s3 a span, .media-s4 .txt-box a, .media-s7 .item .tit, .portfolio-s1 .item .para, .portfolio-s3 .item .para, .portfolio-s4 .table .top-box span, .portfolio-s5 .top-para, .portfolio-s5 .bot-para p, .portfolio-s5 .bot-para p:before, .portfolio-s5 .bot-para .tip, .portfolio-s6 .item p, .portfolio-s6 .tip, .portfolio-s7 .para, .other-s1 .top-para, .other-s1 .top-list span, .other-s1 .top-list .para, .other-s1 .block .para, .other-s2 .block .para, .contact-s1 .para, .contact-s1 .tab-cont .box p { font-size: 1.4rem; } .font-18, .footer .bot-block .link a, .team-pop .tip, .team-pop .para, .about-s5 .item p, .about-s5 a.more, .about-s6 a.more, .about-s7 .item .para, .about-s7 a.more, .about-s8 a.more, .about-s9 a.more, .responsibility-s10 .item p, .responsibility-s15 .single .btns a, .investor-s1 a.more, .investor-s2 .box .s-tit, .investor-s2 .n-box a, .investor-s3 a.more, .investor-s4 a.more, .investor-s6 .link a, .investor-s7 .item .btns a, .investor-s12 a.more, .media-s7 .link a, .other-s3 .item .link a, .index-s1 .item a, .index-s2 a.more, .index-s3 a, .index-s4 .info-box p, .index-s5 .show a.more, .index-s5 .hide a.more, .index-s6 a.more, .index-s7 a, .index-s8 .btn a { font-size: 1.4rem; } .mNavBtn { display: block; width: 20px; height: 16px; right: 5%; top: 22px; position: fixed; cursor: pointer; z-index: 4; } .mNavBtn span { position: absolute; left: 0; width: 20px; height: 2px; background-color: #333; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .mNavBtn span.line1 { top: 0; } .mNavBtn span.line2 { top: 7px; } .mNavBtn span.line3 { bottom: 0; } .mNavBtn.active .line2 { display: none; } .mNavBtn.active .line1 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); top: 7px; } .mNavBtn.active .line3 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 7px; } .header { height: 60px; padding: 0 5%; background-color: #ffffff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .header .logo img { height: 4rem !important; } .header .info { margin-right: 35px; margin-left: 0; padding-left: 0; } .header .info:before { display: none; } .header .global { margin-left: 15px; } .header ul { position: fixed; top: 0; left: 100%; width: 100%; height: 100%; background-color: #fff; padding: 70px 30px; text-align: left; z-index: 3; transition: left 0.6s cubic-bezier(0.19, 1, 0.22, 1); overflow: auto; } .header ul.active { left: 0; } .header li { position: relative; display: block; border-bottom: 1px solid #e6e6e6; } .header li i { width: 50px; height: 50px; position: absolute; right: 0; top: 0; background-position: center; background-repeat: no-repeat; background-image: url("../images/icon-2-1.png"); background-size: auto 9px; } .header li a.single { line-height: 50px !important; font-size: 16px; color: #333; padding: 0; margin-right: 50px; } .header li a.single:before { display: none; } .header li .subnav { position: static; opacity: 1; visibility: visible; background: none; box-shadow: none; padding: 10px 0; display: none; } .header li .subnav .right-box { display: none; } .header li .subnav .left-box { width: 100%; } .header li .subnav .tit { display: none; } .header li .subnav .link { margin-top: 0; } .header li .subnav .link a { width: 100%; margin-top: 0; } .header li .subnav .link a:after, .header li .subnav .link a:before { display: none; } .header li .subnav .link a span { padding: 0; } .fixed-search .link a { margin-bottom: 10px; } .header .global .hide { padding-top: 10px; } .footer .top-block { padding: 3rem 0; } .footer .top-block .flex { display: block; } .footer .top-block .nav { display: none; } .footer .left-box { width: 100%; } .footer .left-box img { display: none; } .footer .left-box .para { margin-top: 0; } .footer .left-box p { margin-top: 1rem; } .footer .right-box { width: 100%; margin-top: 2rem; } .footer .share { display: none; } .footer .bot-block { padding: 2rem 0; } .footer .bot-block .flex { display: block; } .footer .bot-block .link:nth-of-type(2) { margin-top: 1rem; } .footer .totop { display: none; } } .wrap-s { width: 80%; max-width: 1440px; margin: 0 auto; position: relative; z-index: 3; } .wrap-s.max { max-width: 1200px; } .c-bg-fixed, .responsibility-s3, .investor-s1, .investor-s2, .investor-s8, .index-s3, .index-s5, .index-s7 { background-attachment: fixed; } .c-crumbs { font-size: 0; position: relative; z-index: 2; } .c-crumbs a { display: inline-block; vertical-align: top; line-height: 4.375rem; color: #fff; position: relative; margin-right: calc(2.5rem + 5px); } .c-crumbs a:after { content: ''; width: 5px; height: 9px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/icon-2.png"); position: absolute; right: calc(-1.25rem - 5px); top: 50%; margin-top: -4px; } .c-crumbs a:last-of-type { margin-right: 0; } .c-crumbs a:last-of-type:after { display: none; } .c-crumbs.gray a { color: #42474e; } .c-crumbs.gray a:after { background-image: url("../images/icon-2-1.png"); } .c-banner { position: relative; margin-top: -4.375rem; } .c-banner .img-box { overflow: hidden; } .c-banner img { display: block; width: 100%; animation: scale-bg 6s linear forwards; } .c-banner .txt-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-banner .tit { color: #fff; width: 70%; } .c-subnav { background-color: #f2f7fa; font-size: 0; } .c-subnav a { display: inline-block; vertical-align: top; line-height: 5rem; margin-right: 5.625rem; position: relative; } .c-subnav a:last-of-type { margin-right: 0; } .c-subnav a:after { content: ''; width: 100%; height: 4px; background-color: #00639d; position: absolute; bottom: 0; left: 0; transform: scaleX(0); will-change: transform; } .c-subnav a.active { color: #00639d; } .c-subnav a.active:after { transform: scaleX(1); } @media (any-hover: hover) { .c-subnav a:hover { color: #00639d; } .c-subnav a:hover:after { transform: scaleX(1); transition: transform .3s ease; } } .c-label .tit { color: #00639d; text-align: center; } .comm-page { font-size: 0; text-align: center; } .comm-page li { display: inline-block; vertical-align: top; margin: 0 5px; } .comm-page li:after { display: none; } .comm-page li a { display: block; width: 3rem; height: 3rem; color: #42474e; line-height: 3rem; text-align: center; border-radius: 6px; transition: all .3s ease; } .comm-page li:first-of-type a, .comm-page li:last-of-type a { width: auto; padding: 0 1.25rem; } .comm-page li.active a { background-color: #00639e; color: #fff; } @media (any-hover: hover) { .comm-page li:not(.active):hover a { background-color: #f2f7fa; } } .video-pop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9; display: none; } .video-pop .bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.6); z-index: 1; } .video-pop .close { width: 32px; height: 32px; position: absolute; right: 20px; top: 20px; background: url("../images/close-1.svg") center no-repeat; -webkit-transition: all 500ms ease; -moz-transition: all 500ms ease; -ms-transition: all 500ms ease; transition: all 500ms ease; cursor: pointer; z-index: 2; } @media (any-hover: hover) { .video-pop .close:hover { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } } .video-pop video { position: absolute; top: 50%; left: 50%; max-height: 80%; max-width: 80%; z-index: 3; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .text-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; background-color: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); display: none; } .text-modal .close { width: 3rem; height: 3rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-color: #00639d; background-image: url("../images/responsibility/icon-2-2.svg"); background-size: auto 1.5rem; transform: rotate(45deg); position: absolute; right: 1.875rem; top: 1.875rem; cursor: pointer; } .text-modal .main { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.3); padding: 5rem 7.5rem; } .text-modal .tit { color: #42474e; } .text-modal .para { color: #42474e; line-height: 1.6; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e6e6e6; text-align: justify; } .team-pop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; background-color: rgba(0, 0, 0, 0.5); display: none; } .team-pop .close { width: 2.6875rem; height: 2.6875rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-2.svg"); position: absolute; right: 1.875rem; top: 1.875rem; cursor: pointer; } .team-pop .main { max-width: 1320px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff url("../images/about/img-2.png") center bottom no-repeat; background-size: 100% auto; border-radius: 20px; padding: 3.75rem; } .team-pop .flex { display: flex; align-items: center; } .team-pop .img-box { width: 22.5rem; height: 30rem; border-radius: 10px; overflow: hidden; } .team-pop .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; } .team-pop .txt-box { width: calc(100% - 22.5rem); padding-left: 3.75rem; } .team-pop .tit { color: #00639d; } .team-pop .tip { color: #00639d; } .team-pop .para { margin-top: 1rem; color: #42474e; line-height: 1.8; margin-right: -20px; padding-right: 20px; max-height: 18rem; overflow: auto; text-align: justify; } .search-s1 { padding: 7.5rem 0; position: relative; z-index: 2; } .search-s1 .label { text-align: center; color: #00639d; } .search-s1 .form { width: 83%; margin: 2.5rem auto 0; position: relative; background-color: #fff; padding-right: 5rem; box-shadow: 0 0 30px rgba(12, 51, 136, 0.08); } .search-s1 .form input { display: block; width: 100%; height: 5rem; padding: 0 2rem; color: #808080; background-color: transparent; } .search-s1 .form button { width: 5rem; height: 5rem; position: absolute; right: 0; top: 0; background-color: transparent; background-position: center; background-repeat: no-repeat; background-image: url("../images/search.svg"); background-size: auto 1.5rem; cursor: pointer; } .search-s1 .link { margin-top: 3.75rem; text-align: center; font-size: 0; } .search-s1 .link a { display: inline-block; vertical-align: top; color: #333; margin-left: 5.625rem; } .search-s1 .link a i { display: inline-block; vertical-align: middle; width: 1.75rem; height: 1.75rem; border: 1px solid #808080; border-radius: 50%; position: relative; margin: -2px 10px 0 0; } .search-s1 .link a i:before { content: ''; width: 60%; height: 60%; border-radius: 50%; background-color: #00639d; position: absolute; top: 20%; left: 20%; opacity: 0; transition: opacity .3s ease; } .search-s1 .link a:nth-of-type(1) { margin-left: 0; } .search-s1 .link a.active i { border-color: #00639d; } .search-s1 .link a.active i:before { opacity: 1; } .search-s1 .ani { position: relative; width: 1px; height: 7.5rem; margin: 7.5rem auto 0; background-color: #e6e6e6; } .search-s1 .ani:before { content: ''; width: 1px; height: 1.25rem; background-color: #00639d; position: absolute; top: 0; left: 0; animation: banner-ani 1.5s linear infinite; } .search-s1 .tips { color: #333; margin-top: 2.5rem; } .search-s1 .tips span { color: #00639d; } .search-s1 .items { margin: 2.5rem 0; } .search-s1 .item { position: relative; } .search-s1 .item:before, .search-s1 .item:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 8px; } .search-s1 .item:before { background-color: #f2f2f2; } .search-s1 .item:after { background-color: #00639d; transform: scaleX(0); transform-origin: left top; } .search-s1 .item a { position: relative; display: block; padding: 2.5rem 0; } .search-s1 .item i { width: 1.25rem; height: 1.25rem; position: absolute; top: 2.5rem; right: 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/icon-3.svg"); } .search-s1 .item span, .search-s1 .item p { display: block; color: #808080; } .search-s1 .item .tit { margin: 1.5rem 0; color: #333; transition: color .3s ease; } @media (any-hover: hover) { .search-s1 .item:hover:after { transform: scaleX(1); transition: transform .5s linear; } .search-s1 .item:hover .tit { color: #00639d; } } .about-s1 { padding: 7.5rem 0; } .about-s1.nopt { padding-top: 0; } .about-s1 .item { margin-top: 6.25rem; } .about-s1 .item:nth-of-type(1) { margin-top: 0; } .about-s1 .item .tit { position: relative; border-bottom: 1px solid #e6e6e6; cursor: pointer; } .about-s1 .item .tit span { display: inline-block; color: #00639d; padding-bottom: 1rem; position: relative; } .about-s1 .item .tit span:after { content: ''; width: 100%; height: 1px; background-color: #00639d; position: absolute; bottom: -1px; left: 0; } .about-s1 .item .para { color: #42474e; line-height: 1.8; margin-top: 2rem; text-align: justify; } .about-s1 .item .info { color: #42474e; margin-top: 2rem; } .about-s1 .item .info:before { content: ''; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-block; vertical-align: middle; background-color: #00639d; background-position: center; background-repeat: no-repeat; background-image: url("../images/about/icon-1.svg"); background-size: auto 1rem; } .about-s1 .item .info a { color: #00639d; } .about-s2 { padding: 7.5rem 0; } .about-s2 .items { display: flex; flex-wrap: wrap; } .about-s2 .item { width: calc((100% - 4.5rem) / 4); margin: 1.5rem 1.5rem 0 0; cursor: pointer; } .about-s2 .item .img-box { height: 25rem; border-radius: 10px 10px 0 0; overflow: hidden; } .about-s2 .item img { display: block; width: 100%; } .about-s2 .item .txt-box { padding: 2.5rem 1.25rem; background-image: linear-gradient(180deg, #dfe0e0, 30%, #ffffff); text-align: center; } .about-s2 .item .tit { color: #42474e; } .about-s2 .item .tip { color: #42474e; margin-top: 10px; } .about-s2 .item .para { display: none; } @media screen and (min-width: 769px) { .about-s2 .item:nth-of-type(1), .about-s2 .item:nth-of-type(2), .about-s2 .item:nth-of-type(3), .about-s2 .item:nth-of-type(4) { margin-top: 0; } .about-s2 .item:nth-of-type(4n) { margin-right: 0; } } .about-s3 { padding: 5rem 0 7.5rem; } .about-s3 .item { border-bottom: 1px solid #e6e6e6; } .about-s3 .item .tit { height: 10.625rem; position: relative; padding: 0 2.5rem; cursor: pointer; } .about-s3 .item .tit:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 2.5rem; top: 50%; margin-top: -1.5rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-3-1.svg"); } .about-s3 .item .tit span { display: block; max-width: calc(100% - 5rem); color: #00639d; transition: all .3s ease; } .about-s3 .item .hide { font-size: 0; padding: 0 2.5rem 3.75rem; display: none; margin-top: -1.5rem; position: relative; z-index: 2; } .about-s3 .item .para { display: inline-block; vertical-align: top; color: #42474e; line-height: 1.8; text-align: justify; } .about-s3 .item .img-box { width: 22.5rem; display: inline-block; vertical-align: top; border-radius: 10px; overflow: hidden; } .about-s3 .item .img-box img { display: block; width: 100%; } .about-s3 .item.pic .para { width: calc(100% - 22.5rem); padding-left: 3.75rem; } .about-s3 .item.active .tit:after { background-image: url("../images/about/icon-3-2.svg"); } .about-s3 .item.active .hide { display: block; } .about-s4 { padding: 7.5rem 0; } .about-s4 .para { color: #42474e; line-height: 1.8; text-align: justify; } .about-s4 .block { margin: 3.75rem 0; position: relative; } .about-s4 .center-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17.5rem; height: 17.5rem; border-radius: 50%; background-color: #fff; z-index: 2; } .about-s4 .center-box:before { content: ''; width: 85%; height: 85%; position: absolute; top: 7.5%; left: 7.5%; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/img-13.png"); animation: o-rotate 20s linear infinite; } .about-s4 .center-box:after { content: '亚洲bet356体育'; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .about-s4 .items { position: relative; display: flex; flex-wrap: wrap; z-index: 1; } .about-s4 .item { display: inline-block; vertical-align: top; width: calc((100% - 1.5rem) / 2); height: 18.75rem; background-color: #f2f7fa; position: relative; cursor: pointer; overflow: hidden; transition: all .3s ease; } .about-s4 .item:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #00639d; opacity: 0; transition: opacity .3s ease; will-change: opacity; z-index: 1; } .about-s4 .item .b-icon { width: 32rem; height: 32rem; position: absolute; top: 1.875rem; background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .about-s4 .item .box { height: 100%; position: relative; z-index: 3; } .about-s4 .item .icon { width: 3rem; height: 3rem; position: absolute; top: 2.5rem; } .about-s4 .item i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; transition: opacity .3s ease; will-change: opacity; } .about-s4 .item i.hide { opacity: 0; } .about-s4 .item .tit { color: #42474e; width: calc(100% - 10rem); position: absolute; bottom: 2.5rem; transition: color .3s ease; } @media screen and (min-width: 769px) { .about-s4 .item:nth-of-type(1) .b-icon, .about-s4 .item:nth-of-type(3) .b-icon { left: 10rem; } .about-s4 .item:nth-of-type(1) .icon, .about-s4 .item:nth-of-type(3) .icon { left: 2.5rem; } .about-s4 .item:nth-of-type(1) .tit, .about-s4 .item:nth-of-type(3) .tit { left: 2.5rem; } .about-s4 .item:nth-of-type(2), .about-s4 .item:nth-of-type(4) { margin-left: 1.5rem; } .about-s4 .item:nth-of-type(2) .icon, .about-s4 .item:nth-of-type(4) .icon { right: 2.5rem; } .about-s4 .item:nth-of-type(2) .tit, .about-s4 .item:nth-of-type(4) .tit { text-align: right; right: 2.5rem; } .about-s4 .item:nth-of-type(3), .about-s4 .item:nth-of-type(4) { margin-top: 1.5rem; } .about-s4 .item:nth-of-type(1) { border-radius: 10px 0 0 0; } .about-s4 .item:nth-of-type(2) { border-radius: 0 10px 0 0; } .about-s4 .item:nth-of-type(4) { border-radius: 0 0 10px 0; } .about-s4 .item:nth-of-type(3) { border-radius: 0 0 0 10px; } } @media (any-hover: hover) { .about-s4 .item:hover { box-shadow: 0 0.625rem 1.875rem rgba(0, 99, 157, 0.3); } .about-s4 .item:hover:before { opacity: 1; } .about-s4 .item:hover .b-icon { opacity: 0.1; } .about-s4 .item:hover i.show { opacity: 0; } .about-s4 .item:hover i.hide { opacity: 1; } .about-s4 .item:hover .tit { color: #fff; } } .about-s5 { padding: 7.5rem 0; } .about-s5 .para { color: #42474e; line-height: 1.8; margin-top: 2rem; text-align: center; } .about-s5 .items { margin-top: 6.25rem; display: flex; } .about-s5 .item { flex: 1; margin-left: 1.5rem; background-color: #f2f7fa; border-radius: 10px; padding: 3.75rem 2.5rem; } .about-s5 .item i { display: block; margin: 0 auto; width: 7.375rem; height: 7.375rem; background-position: center; background-repeat: no-repeat; background-size: contain; will-change: transform; } .about-s5 .item p { color: #42474e; text-align: center; margin-top: 1.5rem; } @media screen and (min-width: 769px) { .about-s5 .item:nth-of-type(1) { margin-left: 0; } .about-s5 .item:nth-of-type(odd) { transform: translateY(-3.75rem); } } @media (any-hover: hover) { .about-s5 .item:hover i { transform: rotateY(360deg); transition: transform .8s ease; } } .about-s5 a.more { display: block; width: 15rem; margin: 2.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .about-s5 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .about-s6 { padding: 3.75rem 0; } .about-s6 .tab-cont .child { position: relative; padding-bottom: 4rem; display: none; } .about-s6 .tab-cont .child.active { display: block; } .about-s6 .tab-cont .child.active .para { animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .about-s6 .tab-cont .year { text-align: center; } .about-s6 .tab-cont .year span { display: inline-block; font-size: 31.25rem; line-height: 1; font-family: 'Krub-Bold'; color: transparent; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/about/img-4.jpg"); -webkit-background-clip: text; background-clip: text; } .about-s6 .tab-cont .text { width: 100%; height: 10rem; position: absolute; bottom: 0; left: 0; background-color: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); } .about-s6 .tab-cont .para { color: #42474e; text-align: center; opacity: 0; } .about-s6 .tab-tit { text-align: center; font-size: 0; } .about-s6 .tab-tit .item { position: relative; width: 8.75rem; display: inline-block; vertical-align: top; cursor: pointer; } .about-s6 .tab-tit .item:after { content: ''; width: 2.125rem; height: 2px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/img-5.png"); position: absolute; right: 0; top: 1.25rem; margin-top: -1px; transform: translateX(50%); } .about-s6 .tab-tit .item i { display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto; border: 2px solid #42474e; border-radius: 50%; position: relative; } .about-s6 .tab-tit .item i:before { content: ''; width: 1.5rem; height: 1.5rem; border-radius: 50%; background-color: #00639d; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s ease; will-change: opacity; } .about-s6 .tab-tit .item span { display: block; text-align: center; margin-top: 1rem; color: #d9d9d9; } .about-s6 .tab-tit .item:last-of-type:after { display: none; } .about-s6 .tab-tit .item.active i { border-color: #00639d; } .about-s6 .tab-tit .item.active i:before { opacity: 1; } .about-s6 .tab-tit .item.active span { color: #00639d; } @media (any-hover: hover) { .about-s6 .tab-tit .item:hover i { border-color: #00639d; } .about-s6 .tab-tit .item:hover i:before { opacity: 1; } .about-s6 .tab-tit .item:hover span { color: #00639d; } } .about-s6 a.more { display: block; width: 15rem; margin: 3.75rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .about-s6 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .about-s7 { padding: 7.5rem 0; overflow: hidden; } .about-s7 .swiper { margin: 2.5rem -12px 0; padding: 0 calc(50% - 600px); } .about-s7 .item { height: 24rem; padding: 0 12px; opacity: 0.1; transition: opacity .3s ease; will-change: opacity; } .about-s7 .item .box { position: relative; height: 100%; background: #00639d url("../images/about/img-6.png") center bottom no-repeat; background-size: 100% auto; border-radius: 30px; overflow: hidden; } .about-s7 .item .txt-box { height: 100%; position: relative; padding: 3.75rem; } .about-s7 .item .tit { color: #fff; } .about-s7 .item .para { line-height: 1.8; color: #fff; margin-top: 1.5rem; text-align: justify; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .about-s7 .item a { width: 20px; height: 20px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/career/icon-5-1.svg"); position: absolute; bottom: 3.75rem; left: 3.75rem; transition: transform .3s ease; will-change: transform; } .about-s7 .item.pic .img-box { width: 21.5rem; position: absolute; left: 3.75rem; bottom: 0; } .about-s7 .item.pic .img-box img { display: block; width: 100%; } .about-s7 .item.pic .txt-box { width: 60%; margin-left: 40%; } .about-s7 .item.swiper-slide-active { opacity: 1; } .about-s7 .pagination { text-align: center; margin-top: 2.5rem; } .about-s7 .pagination span { display: inline-block; vertical-align: middle; color: #d9d9d9; } .about-s7 .pagination span.curr { color: #00639d; } .about-s7 .pagination .line { display: inline-block; vertical-align: middle; width: 15rem; height: 2px; background-color: #e5e5e5; margin: 0 1.5rem; position: relative; } .about-s7 .pagination .line:before { content: ''; width: 100%; height: 2px; background-color: #00639d; position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: left top; } .about-s7 .pagination .line.active:before { animation: ani-scaleX 5s linear forwards; } .about-s7 a.more { display: block; width: 15rem; margin: 2.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .about-s7 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .about-s8 { padding: 3.75rem 0; } .about-s8 .items { margin-top: 2.5rem; } .about-s8 .swiper { padding: 0 calc(50vw - 720px); } .about-s8 .item { position: relative; width: calc((100% - 4.5rem) / 4); height: auto; background-color: #f2f7fa; border-radius: 10px; overflow: hidden; cursor: pointer; } .about-s8 .item .img-box { overflow: hidden; } .about-s8 .item img { display: block; width: 100%; } .about-s8 .item .txt-box { position: absolute; bottom: 0; left: 0; right: 0; padding: 5rem 2.5rem 2.5rem; z-index: 2; } .about-s8 .item .txt-box:before { content: ''; width: 100%; height: 100%; background-image: linear-gradient(180deg, transparent, #000000); position: absolute; bottom: 0; left: 0; z-index: 1; transition: opacity .3s ease; will-change: opacity; } .about-s8 .item .txt-box:after { content: ''; width: 100%; height: 100%; background-image: linear-gradient(180deg, transparent, #00639d); position: absolute; bottom: 0; left: 0; z-index: 1; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .about-s8 .item .tit { color: #fff; position: relative; z-index: 2; } .about-s8 .item .tip, .about-s8 .item .para { display: none; } @media (any-hover: hover) { .about-s8 .item:hover .txt-box:before { opacity: 0; } .about-s8 .item:hover .txt-box:after { opacity: 1; } } .about-s8 .swiper-control { position: relative; width: 33.75rem; height: 12px; margin: 3.75rem auto 0; padding: 4px 2.5rem; } .about-s8 .swiper-scrollbar { height: 4px; } .about-s8 .swiper-scrollbar-drag { background-color: #00639d; } .about-s8 .button { width: 7px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; margin-top: -6px; cursor: pointer; transition: transform .3s ease; will-change: transform; } .about-s8 .prev { left: 0; background-image: url("../images/career/prev.svg"); } @media (any-hover: hover) { .about-s8 .prev:hover { transform: translateX(-3px); } } .about-s8 .next { right: 0; background-image: url("../images/career/next.svg"); } @media (any-hover: hover) { .about-s8 .next:hover { transform: translateX(3px); } } .about-s8 a.more { display: block; width: 15rem; margin: 3.75rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .about-s8 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .about-s9 { padding: 7.5rem 0 11.25rem; } .about-s9.nopt { padding-top: 0; } .about-s9 .para { color: #42474e; line-height: 1.6; margin-top: 2rem; } .about-s9 .flex { margin-top: 2.5rem; display: flex; align-items: center; } .about-s9 .flex .img-box { width: 50%; border-radius: 10px; overflow: hidden; } .about-s9 .flex .img-box img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } @media (any-hover: hover) { .about-s9 .flex .img-box:hover img { transform: scale(1.1); } } .about-s9 .flex .txt-box { width: 50%; padding-left: 3.75rem; } .about-s9 .flex a { display: block; position: relative; border-top: 1px solid #e6e6e6; padding: 1.5rem 5rem 1.5rem 2.5rem; } .about-s9 .flex a:last-of-type { border-bottom: 1px solid #e6e6e6; } .about-s9 .flex a:before { content: ''; position: absolute; top: 3px; right: 0; bottom: 3px; left: 0; background-color: #f2f7fa; border-radius: 10px; z-index: 1; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .about-s9 .flex a:after { content: ''; width: 1.25rem; height: 1.25rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/icon-6.svg"); position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); z-index: 2; } .about-s9 .flex a span { display: block; line-height: 1.6; color: #42474e; position: relative; z-index: 2; } @media (any-hover: hover) { .about-s9 .flex a:hover:before { opacity: 1; } } .about-s9 a.more { display: block; width: 15rem; margin: 2.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .about-s9 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .about-s10 { position: relative; padding: 7.5rem 0; } .about-s10 .r-box { width: 5.625rem; position: absolute; right: 0; top: 0; height: 100%; } .about-s10 .r-box .cell-box { height: 100vh; position: sticky; top: 0; } .about-s10 .r-box span { display: block; color: #000000; margin-top: 1.5rem; cursor: pointer; position: relative; } .about-s10 .r-box span:after { content: ''; width: 12px; height: 4px; background-color: #00639d; position: absolute; right: 0; top: 50%; margin-top: -2px; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .about-s10 .r-box span:nth-of-type(1) { margin-top: 0; } .about-s10 .r-box span.active { color: #00639d; } .about-s10 .r-box span.active:after { opacity: 1; } .about-s10 .year-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .about-s10 .year-box .cell-box { height: 100vh; position: sticky; top: 0; } .about-s10 .year-box span { display: block; text-align: center; font-size: 37.5rem; color: #fff; text-shadow: 2.5rem 5rem 5rem rgba(0, 99, 157, 0.1); } .about-s10 .line { position: absolute; top: 0; left: 50%; margin-left: -2px; width: 4px; height: 100%; background: url("../images/about/icon-11.png") center top repeat-y; z-index: 1; overflow: hidden; } .about-s10 .line span { width: 100%; background-color: #00639d; position: absolute; top: 0; left: 0; } .about-s10 .icon { width: 9.375rem; height: 9.375rem; margin: 0 auto; position: relative; border-radius: 50%; background-color: #e5eff5; z-index: 2; } .about-s10 .icon:before { content: ''; width: 80%; height: 80%; position: absolute; top: 10%; left: 10%; border: .625rem solid #00639d; border-radius: 50%; background-color: #fff; box-sizing: border-box; } .about-s10 .icon i { width: 3rem; height: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/about/icon-10.png"); } .about-s10 .items { padding: 5rem 0; position: relative; z-index: 2; } .about-s10 .item { width: 50%; min-height: 27.5rem; margin-top: -6.25rem; } .about-s10 .item span { position: relative; display: block; font-family: 'Krub-Bold'; color: #42474e; transition: color .3s ease; } .about-s10 .item span:before { content: ''; width: 1.5rem; height: 1.5rem; box-sizing: border-box; border-radius: 50%; background-color: #fff; border: 4px solid #00639d; position: absolute; top: 50%; } .about-s10 .item .para { color: #42474e; line-height: 1.6; margin-top: 1rem; } .about-s10 .item .img-box { display: inline-block; width: 30rem; border-radius: 10px; overflow: hidden; margin-top: 2.5rem; } .about-s10 .item .img-box img { display: block; width: 100%; } .about-s10 .item:nth-of-type(1) { margin-top: 0; } @media screen and (min-width: 769px) { .about-s10 .item:nth-of-type(odd) { padding-right: 7.5rem; text-align: right; } .about-s10 .item:nth-of-type(odd) span:before { right: -7.5rem; transform: translate(50%, -50%); } .about-s10 .item:nth-of-type(even) { margin-left: 50%; padding-left: 7.5rem; text-align: left; } .about-s10 .item:nth-of-type(even) span:before { left: -7.5rem; transform: translate(-50%, -50%); } } .about-s10 .item.active span { color: #00639d; } .responsibility-s1 { padding: 7.5rem 0; } .responsibility-s1 .para { color: #42474e; line-height: 1.6; text-align: center; margin-top: 2rem; } .responsibility-s1 .para.t-left { text-align: left; } .responsibility-s1 .items { margin-top: 3.75rem; } .responsibility-s1 .items.nomt { margin-top: 0; } .responsibility-s1 .item { display: flex; align-items: center; margin-top: 3.75rem; } .responsibility-s1 .item:nth-of-type(1) { margin-top: 0; } .responsibility-s1 .item .img-box { width: 50%; border-radius: 10px; overflow: hidden; } .responsibility-s1 .item img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } .responsibility-s1 .item .txt-box { width: 50%; } .responsibility-s1 .item p { color: #42474e; line-height: 1.6; } @media screen and (min-width: 769px) { .responsibility-s1 .item:nth-of-type(odd) .txt-box { padding-left: 3.75rem; } .responsibility-s1 .item:nth-of-type(even) .txt-box { padding-right: 3.75rem; order: -1; } } @media (any-hover: hover) { .responsibility-s1 .item:hover img { transform: scale(1.1); } } .responsibility-s2 { padding: 3.75rem 0 7.5rem; } .responsibility-s2 .para { color: #42474e; line-height: 1.6; text-align: center; margin-top: 2rem; } .responsibility-s2 .items { margin-top: 3.75rem; display: flex; } .responsibility-s2 .item { flex: 1; background-color: #f2f7fa; padding: 3.75rem 2.5rem 2.5rem; border-radius: 10px; cursor: pointer; } .responsibility-s2 .item:after { content: ''; display: block; width: 3rem; height: 3rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/responsibility/icon-2-1.svg"); background-size: auto 1.5rem; margin: 2.5rem auto 0; transition: all .3s ease; } .responsibility-s2 .item i { display: block; margin: 0 auto; width: 6.75rem; height: 6.75rem; background-position: center; background-repeat: no-repeat; background-size: contain; } .responsibility-s2 .item .tit { color: #42474e; text-align: center; margin-top: 2.5rem; transition: color .3s ease; } .responsibility-s2 .item .text-modal-para { display: none; } .responsibility-s2 .item:nth-of-type(2) { margin-left: 1.5rem; } @media (any-hover: hover) { .responsibility-s2 .item:hover:after { background-color: #00639d; background-image: url("../images/responsibility/icon-2-2.svg"); } .responsibility-s2 .item:hover .tit { color: #00639d; } } .responsibility-s3 { padding: 7.5rem 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .responsibility-s3.style-1 { background-image: url("../images/responsibility/img-2.jpg"); } .responsibility-s3.style-2 { background-image: url("../images/responsibility/img-4.jpg"); } .responsibility-s3 .c-label .tit { color: #ffffff; } .responsibility-s3 .para { color: #ffffff; line-height: 1.6; margin-top: 2.5rem; } .responsibility-s3 .para ul { padding-left: 2.5rem; } .responsibility-s4 { padding: 11.25rem 0; } .responsibility-s4 .flex { margin-top: 2.5rem; display: flex; align-items: flex-start; } .responsibility-s4 .flex .img-box { width: 50%; border-radius: 10px; overflow: hidden; } .responsibility-s4 .flex .img-box img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } @media (any-hover: hover) { .responsibility-s4 .flex .img-box:hover img { transform: scale(1.1); } } .responsibility-s4 .flex .txt-box { width: 50%; padding: 3.125rem 0 0 3.75rem; } .responsibility-s4 .flex a { display: block; position: relative; border-top: 1px solid #e6e6e6; padding: 1.5rem 5rem 1.5rem 2.5rem; } .responsibility-s4 .flex a:last-of-type { border-bottom: 1px solid #e6e6e6; } .responsibility-s4 .flex a:before { content: ''; position: absolute; top: 3px; right: 0; bottom: 3px; left: 0; background-color: #f2f7fa; border-radius: 10px; z-index: 1; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .responsibility-s4 .flex a:after { content: ''; width: 1.25rem; height: 1.25rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/icon-3.svg"); position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); z-index: 2; } .responsibility-s4 .flex a span { display: block; line-height: 1.6; color: #42474e; position: relative; z-index: 2; } @media (any-hover: hover) { .responsibility-s4 .flex a:hover:before { opacity: 1; } } .responsibility-s5 { padding: 7.5rem 0; } .responsibility-s5 .para { color: #42474e; line-height: 1.6; text-align: center; margin-top: 2rem; } .responsibility-s5 .para.t-left { text-align: left; text-align: justify; } .responsibility-s5 .cont { margin-top: 2.5rem; } .responsibility-s5 .cont.nomt { margin-top: 0; } .responsibility-s5 .img-box { border-radius: 10px; overflow: hidden; } .responsibility-s5 .img-box img { display: block; width: 100%; } .responsibility-s5 .txt-box { margin-top: -15rem; padding: 0 7.5rem; display: flex; justify-content: space-between; align-items: flex-start; } .responsibility-s5 .txt-box:after { content: ''; width: 6rem; height: 5.0625rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/img-6.png"); } .responsibility-s5 .box { background-color: #fff; border-radius: 10px; width: calc(100% - 15rem); padding: 3.75rem; } .responsibility-s5 .box .tit { color: #42474e; line-height: 1.6; text-align: justify; } .responsibility-s5 .box .info { display: flex; align-items: center; margin-top: 2.5rem; } .responsibility-s5 .box .info-img { width: 7.5rem; border-radius: 10px; overflow: hidden; } .responsibility-s5 .box .info-img img { display: block; width: 100%; } .responsibility-s5 .box .info-txt { width: calc(100% - 7.5rem); padding-left: 2.5rem; } .responsibility-s5 .box .info-txt span { display: block; color: #00639d; } .responsibility-s5 .box .info-txt p { color: #42474e; } .responsibility-s6 { padding: 0 0 11.25rem; } .responsibility-s6.pt { padding-top: 7.5rem; } .responsibility-s6 .top-block.mt { margin-top: 2.5rem; } .responsibility-s6 .b-para { color: #42474e; line-height: 1.6; text-align: justify; } .responsibility-s6 .items { margin-top: 2.5rem; overflow: hidden; } .responsibility-s6 .swiper { padding: 0 calc(50vw - 720px); } .responsibility-s6 .swiper-wrapper { padding-bottom: 2.5rem; } .responsibility-s6 .item { width: calc((100% - 4.5rem) / 4); height: auto; background-color: #f2f7fa; border-radius: 10px; overflow: hidden; cursor: pointer; } .responsibility-s6 .item .img-box { overflow: hidden; } .responsibility-s6 .item .img-box.small { position: relative; height: 12.5rem; } .responsibility-s6 .item .img-box.small img { position: absolute; right: -15%; top: 0; height: 100%; width: auto; } .responsibility-s6 .item img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } .responsibility-s6 .item .txt-box { padding: 2.5rem; height: 15rem; position: relative; } .responsibility-s6 .item .txt-box:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 1.75rem; bottom: 1.75rem; background-position: center; background-repeat: no-repeat; border-radius: 50%; background-image: url("../images/career/icon-5.svg"); background-size: auto 1.5rem; transition: all .3s ease; } .responsibility-s6 .item .tit { color: #42474e; } .responsibility-s6 .item .text-modal-para { display: none; } .responsibility-s6 .item:nth-of-type(even) { transform: translateY(2.5rem); } @media (any-hover: hover) { .responsibility-s6 .item:hover img { transform: scale(1.1); } .responsibility-s6 .item:hover .txt-box:after { background-color: #00639d; background-image: url("../images/career/icon-5-1.svg"); } } .responsibility-s6 .swiper-control { position: relative; width: 33.75rem; height: 12px; margin: 2.5rem auto 0; padding: 4px 2.5rem; } .responsibility-s6 .swiper-scrollbar { height: 4px; } .responsibility-s6 .swiper-scrollbar-drag { background-color: #00639d; } .responsibility-s6 .button { width: 7px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; margin-top: -6px; cursor: pointer; transition: transform .3s ease; will-change: transform; } .responsibility-s6 .prev { left: 0; background-image: url("../images/career/prev.svg"); } @media (any-hover: hover) { .responsibility-s6 .prev:hover { transform: translateX(-3px); } } .responsibility-s6 .next { right: 0; background-image: url("../images/career/next.svg"); } @media (any-hover: hover) { .responsibility-s6 .next:hover { transform: translateX(3px); } } .responsibility-s7 { padding-bottom: 11.25rem; } .responsibility-s7.pt { padding-top: 7.5rem; } .responsibility-s7 .para { color: #42474e; line-height: 1.6; text-align: center; } .responsibility-s7 .para.t-left { text-align: left; text-align: justify; } .responsibility-s7 .para.mt { margin-top: 6.25rem; } .responsibility-s7 .items { margin-top: 2.5rem; display: flex; } .responsibility-s7 .item { flex: 1; height: 30rem; position: relative; background-color: #f2f7fa; padding: 5.625rem 2.5rem; border-radius: 10px; cursor: pointer; margin-left: 1.5rem; } .responsibility-s7 .item:after { content: ''; position: absolute; bottom: 2.5rem; left: 0; right: 0; margin: 0 auto; display: block; width: 3rem; height: 3rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/responsibility/icon-2-1.svg"); background-size: auto 1.5rem; transition: all .3s ease; } .responsibility-s7 .item i { display: block; margin: 0 auto; width: 6.75rem; height: 6.75rem; background-position: center; background-repeat: no-repeat; background-size: contain; } .responsibility-s7 .item .tit { color: #42474e; text-align: center; margin-top: 2.5rem; transition: color .3s ease; } .responsibility-s7 .item .text-modal-para { display: none; } .responsibility-s7 .item p { color: #42474e; line-height: 1.6; margin-top: 1.25rem; text-align: justify; } .responsibility-s7 .item.flip { padding: 0; background-color: transparent; -webkit-perspective: 800px; perspective: 800px; cursor: pointer; } .responsibility-s7 .item.flip:after { display: none; } .responsibility-s7 .item.flip .box { position: relative; height: 100%; will-change: transform; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .5s ease; } .responsibility-s7 .item.flip .show { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background-color: #f2f7fa; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; } .responsibility-s7 .item.flip .show:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 1.75rem; bottom: 1.75rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/career/icon-5.svg"); background-size: auto 1.5rem; transition: all .3s ease; } .responsibility-s7 .item.flip .show p { display: none; } .responsibility-s7 .item.flip .hide { position: relative; width: 100%; height: 100%; padding: 2.5rem; border-radius: 10px; overflow: hidden; background-color: #f2f7fa; transform: rotateY(-180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .responsibility-s7 .item.flip .hide .tit { text-align: left; margin-top: 0; } .responsibility-s7 .item.flip .hide:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 1.75rem; bottom: 1.75rem; background-color: #00639d; border-radius: 50%; background-position: center; background-repeat: no-repeat; transform: rotate(45deg); background-image: url("../images/career/icon-5-1.svg"); background-size: auto 1.5rem; } .responsibility-s7 .item.active .box { transform: rotateY(180deg); } .responsibility-s7 .item:nth-of-type(1) { margin: 0; } @media screen and (min-width: 769px) { .responsibility-s7 .item:nth-of-type(2) { transform: translateY(3.75rem); } } @media (any-hover: hover) { .responsibility-s7 .item:hover:after { background-color: #00639d; background-image: url("../images/responsibility/icon-2-2.svg"); } .responsibility-s7 .item:hover .tit { color: #00639d; } .responsibility-s7 .item:hover .show:after { background-color: #00639d; background-image: url("../images/career/icon-5-1.svg"); } } .responsibility-s8 { padding: 7.5rem 0; background: #00639d url("../images/responsibility/img-9.png") center bottom no-repeat; background-size: 100% auto; } .responsibility-s8 .tit { padding-top: 5rem; color: #ffffff; line-height: 1.6; text-align: center; background: url("../images/responsibility/img-10.png") center top no-repeat; background-size: 11.9375rem auto; } .responsibility-s8 .info { margin-top: 2.5rem; } .responsibility-s8 .info-img { width: 7.5rem; margin: 0 auto; border-radius: 10px; overflow: hidden; } .responsibility-s8 .info-img img { display: block; width: 100%; } .responsibility-s8 .info-txt { margin-top: 2rem; text-align: center; } .responsibility-s8 .info-txt span { display: block; color: #ffffff; } .responsibility-s8 .info-txt p { color: #ffffff; } .responsibility-s9 { padding: 7.5rem 0; } .responsibility-s9 .b-para { color: #42474e; line-height: 1.6; text-align: center; margin-top: 2rem; } .responsibility-s9 .b-para.t-left { text-align: left; text-align: justify; } .responsibility-s9 .b-para.nomt { margin-top: 0; } .responsibility-s9 .items { margin-top: 2.5rem; display: flex; } .responsibility-s9 .item { flex: 1; height: 30rem; margin-left: 1.5rem; -webkit-perspective: 800px; perspective: 800px; cursor: pointer; } .responsibility-s9 .item .box { position: relative; height: 100%; will-change: transform; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .5s ease; } .responsibility-s9 .item .show { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background-color: #f2f7fa; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; } .responsibility-s9 .item .show:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 1.75rem; bottom: 1.75rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/career/icon-5.svg"); background-size: auto 1.5rem; transition: all .3s ease; } .responsibility-s9 .item .hide { position: relative; width: 100%; height: 100%; padding: 2.5rem; border-radius: 10px; overflow: hidden; background-color: #f2f7fa; transform: rotateY(-180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .responsibility-s9 .item .hide:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 1.75rem; bottom: 1.75rem; background-color: #00639d; border-radius: 50%; background-position: center; background-repeat: no-repeat; transform: rotate(45deg); background-image: url("../images/career/icon-5-1.svg"); background-size: auto 1.5rem; } .responsibility-s9 .item .img-box { overflow: hidden; } .responsibility-s9 .item img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } .responsibility-s9 .item .txt-box { padding: 2.5rem; } .responsibility-s9 .item .tit { color: #42474e; } .responsibility-s9 .item .para { color: #42474e; line-height: 1.6; margin-top: 1.25rem; text-align: justify; } .responsibility-s9 .item:nth-of-type(1) { margin: 0; } .responsibility-s9 .item:nth-of-type(even) { margin-top: 2.5rem; } .responsibility-s9 .item.active .box { transform: rotateY(180deg); } @media (any-hover: hover) { .responsibility-s9 .item:hover img { transform: scale(1.1); } .responsibility-s9 .item:hover .show:after { background-color: #00639d; background-image: url("../images/career/icon-5-1.svg"); } } .responsibility-s10 { padding: 7.5rem 0; } .responsibility-s10 .para { color: #42474e; line-height: 1.6; margin-top: 2rem; } .responsibility-s10 .items { margin-top: 2.5rem; display: flex; } .responsibility-s10 .item { flex: 1; background-color: #f2f7fa; padding: 3.75rem 2.5rem 2.5rem; border-radius: 10px; cursor: pointer; } .responsibility-s10 .item:after { content: ''; display: block; width: 3rem; height: 3rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/responsibility/icon-2-1.svg"); background-size: auto 1.5rem; margin: 2.5rem auto 0; transition: all .3s ease; } .responsibility-s10 .item i { display: block; margin: 0 auto; width: 6.75rem; height: 6.75rem; background-position: center; background-repeat: no-repeat; background-size: contain; } .responsibility-s10 .item .tit { color: #42474e; text-align: center; margin-top: 1rem; transition: color .3s ease; } .responsibility-s10 .item p { color: #42474e; text-align: center; margin-top: 1rem; } .responsibility-s10 .item .text-modal-para { display: none; } .responsibility-s10 .item:nth-of-type(2) { margin-left: 1.5rem; } @media (any-hover: hover) { .responsibility-s10 .item:hover:after { background-color: #00639d; background-image: url("../images/responsibility/icon-2-2.svg"); } .responsibility-s10 .item:hover .tit { color: #00639d; } } .responsibility-s11 .flex { display: flex; align-items: center; } .responsibility-s11 .flex .img-box { width: calc((100% - 1.5rem) / 2); } .responsibility-s11 .flex .img-box img { display: block; width: 100%; } .responsibility-s11 .flex .txt-box { width: calc((100% - 1.5rem) / 2); margin-left: 1.5rem; } .responsibility-s11 .flex a { display: block; position: relative; border-top: 1px solid #e6e6e6; padding: 1rem 5rem 1rem 2.5rem; } .responsibility-s11 .flex a:last-of-type { border-bottom: 1px solid #e6e6e6; } .responsibility-s11 .flex a:before { content: ''; position: absolute; top: 3px; right: 0; bottom: 3px; left: 0; background-color: #f2f7fa; border-radius: 10px; z-index: 1; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .responsibility-s11 .flex a:after { content: ''; width: 1.375rem; height: 1.375rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/icon-6.svg"); position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); z-index: 2; } .responsibility-s11 .flex a span { display: block; color: #42474e; position: relative; z-index: 2; } @media (any-hover: hover) { .responsibility-s11 .flex a:hover:before { opacity: 1; } } .responsibility-s12 { padding: 7.5rem 0; } .responsibility-s12 .top-block.mt { margin-top: 2.5rem; } .responsibility-s12 .b-para { color: #42474e; line-height: 1.6; } .responsibility-s12 .items { margin-top: 2.5rem; } .responsibility-s12 .swiper { padding: 0 calc(50vw - 720px); } .responsibility-s12 .swiper-wrapper { padding-bottom: 2.5rem; } .responsibility-s12 .item { width: calc((100% - 4.5rem) / 4); height: auto; background-color: #f2f7fa; border-radius: 10px; overflow: hidden; cursor: pointer; } .responsibility-s12 .item .img-box { overflow: hidden; } .responsibility-s12 .item img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } .responsibility-s12 .item .txt-box { padding: 2.5rem; position: relative; } .responsibility-s12 .item .tit { color: #42474e; } .responsibility-s12 .item p { line-height: 1.6; color: #42474e; margin-top: 10px; } .responsibility-s12 .item:nth-of-type(even) { transform: translateY(2.5rem); } @media (any-hover: hover) { .responsibility-s12 .item:hover img { transform: scale(1.1); } } .responsibility-s12 .swiper-control { position: relative; width: 33.75rem; height: 12px; margin: 2.5rem auto 0; padding: 4px 2.5rem; } .responsibility-s12 .swiper-scrollbar { height: 4px; } .responsibility-s12 .swiper-scrollbar-drag { background-color: #00639d; } .responsibility-s12 .button { width: 7px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; margin-top: -6px; cursor: pointer; transition: transform .3s ease; will-change: transform; } .responsibility-s12 .prev { left: 0; background-image: url("../images/career/prev.svg"); } @media (any-hover: hover) { .responsibility-s12 .prev:hover { transform: translateX(-3px); } } .responsibility-s12 .next { right: 0; background-image: url("../images/career/next.svg"); } @media (any-hover: hover) { .responsibility-s12 .next:hover { transform: translateX(3px); } } .responsibility-s13 { padding-bottom: 11.25rem; } .responsibility-s13 .para { color: #42474e; line-height: 1.6; margin-top: 2rem; } .responsibility-s13 .block { margin-top: 2.5rem; position: relative; } .responsibility-s13 .center-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20rem; height: 20rem; border-radius: 50%; background-color: #fff; z-index: 2; } .responsibility-s13 .center-box:before { content: ''; width: 87.5%; height: 87.5%; position: absolute; top: 6.25%; left: 6.25%; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/img-13.png"); animation: o-rotate 20s linear infinite; } .responsibility-s13 .center-box:after { content: ''; width: 6.25rem; height: 6.25rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/icon-7.png"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .responsibility-s13 .items { position: relative; display: flex; flex-wrap: wrap; z-index: 1; } .responsibility-s13 .item { display: inline-block; vertical-align: top; width: calc((100% - 1.5rem) / 2); height: 20rem; background-color: #f2f7fa; position: relative; cursor: pointer; overflow: hidden; transition: all .3s ease; } .responsibility-s13 .item:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: #00639d url("../images/responsibility/img-9.png") center bottom no-repeat; background-size: 100% auto; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .responsibility-s13 .item .box { height: 100%; position: relative; z-index: 2; } .responsibility-s13 .item .box:after { content: ''; width: 1.5rem; height: 1.5rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/icon-2-2.svg"); position: absolute; top: 3.75rem; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .responsibility-s13 .item span { color: #00639d; padding: 0 3.75rem; position: absolute; top: 2.5rem; left: 0; right: 0; transition: opacity .3s ease; will-change: opacity; } .responsibility-s13 .item .tit { color: #42474e; padding: 0 3.75rem; position: absolute; bottom: 3.75rem; left: 0; right: 0; transition: color .3s ease; } .responsibility-s13 .item .text-modal-para { display: none; } @media screen and (min-width: 769px) { .responsibility-s13 .item:nth-of-type(1) .box:after, .responsibility-s13 .item:nth-of-type(4) .box:after { left: 3.75rem; } .responsibility-s13 .item:nth-of-type(2), .responsibility-s13 .item:nth-of-type(3) { margin-left: 1.5rem; } .responsibility-s13 .item:nth-of-type(2) .box:after, .responsibility-s13 .item:nth-of-type(3) .box:after { right: 3.75rem; } .responsibility-s13 .item:nth-of-type(2) span, .responsibility-s13 .item:nth-of-type(2) .tit, .responsibility-s13 .item:nth-of-type(3) span, .responsibility-s13 .item:nth-of-type(3) .tit { text-align: right; } .responsibility-s13 .item:nth-of-type(3), .responsibility-s13 .item:nth-of-type(4) { margin-top: 1.5rem; } .responsibility-s13 .item:nth-of-type(3) { order: 1; } .responsibility-s13 .item:nth-of-type(1) { border-radius: 10px 0 0 0; } .responsibility-s13 .item:nth-of-type(2) { border-radius: 0 10px 0 0; } .responsibility-s13 .item:nth-of-type(3) { border-radius: 0 0 10px 0; } .responsibility-s13 .item:nth-of-type(4) { border-radius: 0 0 0 10px; } } @media (any-hover: hover) { .responsibility-s13 .item:hover { box-shadow: 0 0.625rem 1.875rem rgba(0, 99, 157, 0.3); } .responsibility-s13 .item:hover:before { opacity: 1; } .responsibility-s13 .item:hover .box:after { opacity: 1; } .responsibility-s13 .item:hover span { opacity: 0; } .responsibility-s13 .item:hover .tit { color: #fff; } } .responsibility-s14 { padding: 7.5rem 0; } .responsibility-s14 .para { color: #42474e; line-height: 1.6; margin-top: 2rem; } .responsibility-s14 .flex { margin-top: 2.5rem; display: flex; align-items: center; } .responsibility-s14 .flex .img-box { width: 50%; border-radius: 10px; overflow: hidden; } .responsibility-s14 .flex .img-box img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } @media (any-hover: hover) { .responsibility-s14 .flex .img-box:hover img { transform: scale(1.1); } } .responsibility-s14 .flex .txt-box { width: 50%; padding-left: 3.75rem; } .responsibility-s14 .flex p { color: #42474e; line-height: 1.6; margin-bottom: 2.5rem; } .responsibility-s14 .flex a { display: block; position: relative; border-top: 1px solid #e6e6e6; padding: 1.5rem 5rem 1.5rem 2.5rem; } .responsibility-s14 .flex a:last-of-type { border-bottom: 1px solid #e6e6e6; } .responsibility-s14 .flex a:before { content: ''; position: absolute; top: 3px; right: 0; bottom: 3px; left: 0; background-color: #f2f7fa; border-radius: 10px; z-index: 1; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .responsibility-s14 .flex a:after { content: ''; width: 1.25rem; height: 1.25rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/responsibility/icon-8.png"); position: absolute; right: 2.5rem; top: 50%; transform: translateY(-50%); z-index: 2; } .responsibility-s14 .flex a span { display: block; line-height: 1.6; color: #42474e; position: relative; z-index: 2; } @media (any-hover: hover) { .responsibility-s14 .flex a:hover:before { opacity: 1; } } .responsibility-s15 { padding: 7.5rem 0; } .responsibility-s15 .single { display: flex; align-items: center; } .responsibility-s15 .single.a-middle { justify-content: center; } .responsibility-s15 .single .img-box { width: 50%; } .responsibility-s15 .single .img-box img { display: block; width: 100%; } .responsibility-s15 .single .txt-box { width: 50%; } .responsibility-s15 .single .tit { color: #42474e; } .responsibility-s15 .single .btns { font-size: 0; margin-top: 5rem; } .responsibility-s15 .single .btns a { display: inline-block; vertical-align: top; width: 12.5rem; color: #fff; line-height: 3; background-color: #00639d; text-align: center; border-radius: 5px; transition: all .3s ease; } .responsibility-s15 .single .btns a:nth-of-type(1) { margin-right: 10px; } @media (any-hover: hover) { .responsibility-s15 .single .btns a:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .responsibility-s15 .items { margin-top: 7.5rem; border-bottom: 1px solid #e6e6e6; } .responsibility-s15 .item { border-top: 1px solid #e6e6e6; padding: 2.5rem; display: flex; align-items: center; justify-content: space-between; } .responsibility-s15 .item span { width: calc(100% - 20rem); color: #42474e; } .responsibility-s15 .item .btns { font-size: 0; } .responsibility-s15 .item .btns a { display: inline-block; vertical-align: top; width: 7.5rem; color: #fff; line-height: 3; background-color: #00639d; text-align: center; border-radius: 5px; transition: all .3s ease; } .responsibility-s15 .item .btns a:nth-of-type(1) { margin-right: 10px; } @media (any-hover: hover) { .responsibility-s15 .item .btns a:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .responsibility-s15 .para { color: #42474e; line-height: 1.6; margin-top: 3.75rem; } .career-s1 { padding: 7.5rem 0; } .career-s1 .c-label .tit { color: #42474e; } .career-s1 .items { margin-top: 3.75rem; display: flex; flex-wrap: wrap; } .career-s1 .item { height: 16.3125rem; border-radius: 10px; overflow: hidden; margin-top: 1.5rem; } .career-s1 .item .img-box { height: 100%; } .career-s1 .item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; will-change: transform; } @media screen and (min-width: 769px) { .career-s1 .item:nth-of-type(6n), .career-s1 .item:nth-of-type(6n-1) { width: calc((100% - 1.5rem) / 2); } .career-s1 .item:nth-of-type(6n-2) { width: 100%; } .career-s1 .item:nth-of-type(6n-3), .career-s1 .item:nth-of-type(6n-4), .career-s1 .item:nth-of-type(6n-5) { width: calc((100% - 3rem) / 3); } .career-s1 .item:nth-of-type(6n), .career-s1 .item:nth-of-type(6n-3), .career-s1 .item:nth-of-type(6n-4) { margin-left: 1.5rem; } .career-s1 .item:nth-of-type(1), .career-s1 .item:nth-of-type(2), .career-s1 .item:nth-of-type(3) { margin-top: 0; } } @media (any-hover: hover) { .career-s1 .item:hover img { transform: scale(1.1); } } .career-s2 { padding: 7.5rem 0 2.5rem; position: relative; z-index: 2; } .career-s2 .c-label .tit { color: #42474e; } .career-s2 .filter { margin-top: 3.75rem; padding: 0 7.5rem; font-size: 0; position: relative; z-index: 2; } .career-s2 .filter .year-box { display: inline-block; vertical-align: top; width: 17.5rem; margin-right: 1.5rem; position: relative; z-index: 2; } .career-s2 .filter .year-box span { display: block; border: 1px solid #00639e; border-radius: 8px; line-height: 52px; color: #42474e; padding: 0 1.875rem; position: relative; cursor: pointer; z-index: 2; } .career-s2 .filter .year-box span:after { content: ''; width: 12px; height: 7px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/media/icon-2.png"); position: absolute; right: 1.875rem; top: 50%; margin-top: -3px; } .career-s2 .filter .year-box .hide { position: absolute; top: 50%; left: 0; width: 100%; background-color: #fff; padding: calc(27px + 2rem) 1.875rem 2rem; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); border-radius: 0 0 8px 8px; display: none; } .career-s2 .filter .year-box .hide a { display: inline-block; vertical-align: top; width: 100%; color: #42474e; margin-top: 1rem; } .career-s2 .filter .year-box .hide a:nth-of-type(1) { margin-top: 0; } @media (any-hover: hover) { .career-s2 .filter .year-box .hide a:hover { color: #00639e; } } .career-s2 .filter .year-box.open .hide { display: block; } .career-s2 .filter .form { display: inline-block; vertical-align: top; width: calc(100% - 19rem); height: 54px; background-color: #f2f7fa; border-radius: 8px; position: relative; } .career-s2 .filter .form input { display: block; width: 100%; height: 100%; padding: 0 1.875rem; color: #42474e; background-color: transparent; } .career-s2 .filter .form button { width: 48px; height: 48px; position: absolute; top: 3px; right: 3px; background-color: #00639d; background-position: center; background-repeat: no-repeat; background-image: url("../images/media/icon-1.png"); background-size: auto 18px; border-radius: 8px; cursor: pointer; } .career-s3 { padding: 8.75rem 0 7.5rem; } .career-s3 .items { margin-top: 2.5rem; } .career-s3 .box { display: flex; flex-wrap: wrap; } .career-s3 .item { width: calc((100% - 3rem) / 3); margin: 1.5rem 1.5rem 0 0; position: relative; border-radius: 10px; overflow: hidden; transition: all .3s ease; background-color: #f2f7fa; height: 15rem; } .career-s3 .item:before { content: ''; width: 100%; height: 100%; background: url("../images/career/img-2.png") center bottom no-repeat; background-size: 100% auto; opacity: 0; transition: opacity .3s ease; will-change: opacity; z-index: 1; } .career-s3 .item a { display: block; padding: 3.75rem 2.5rem 2.5rem; position: relative; z-index: 2; transition: transform .3s ease; will-change: transform; } .career-s3 .item a:after { content: ''; display: block; width: 1.375rem; height: 1rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/career/icon-2.svg"); margin: 1rem auto 0; } .career-s3 .item i { display: block; width: 5.5rem; height: 5.5rem; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; transition: opacity .3s ease; will-change: opacity; } .career-s3 .item span { display: block; color: #42474e; margin-top: 1.5rem; text-align: center; transition: color .3s ease; } .career-s3 .item p { color: #ffffff; line-height: 1.6; text-align: center; margin-top: 1.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .3s ease; will-change: opacity; } @media screen and (min-width: 769px) { .career-s3 .item:nth-of-type(1), .career-s3 .item:nth-of-type(2), .career-s3 .item:nth-of-type(3) { margin-top: 0; } .career-s3 .item:nth-of-type(3n) { margin-right: 0; } } @media (any-hover: hover) { .career-s3 .item:hover { background-color: #00639d; box-shadow: 0 10px 30px rgba(0, 99, 157, 0.3); } .career-s3 .item:hover:before { opacity: 1; } .career-s3 .item:hover i { opacity: 0; } .career-s3 .item:hover a { transform: translateY(-7rem); } .career-s3 .item:hover span { color: #fff; } .career-s3 .item:hover p { opacity: 1; } } .career-s4 { padding: 3.75rem 0 11.5rem; } .career-s4 .items { margin-top: 2.5rem; overflow: hidden; } .career-s4 .swiper { padding: 0 calc(50vw - 720px); } .career-s4 .swiper-wrapper { padding-bottom: 2.5rem; } .career-s4 .item { width: calc((100% - 4.5rem) / 4); height: auto; background-color: #f2f7fa; border-radius: 10px; overflow: hidden; } .career-s4 .item .img-box { overflow: hidden; } .career-s4 .item img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } .career-s4 .item .txt-box { padding: 2.5rem; } .career-s4 .item .tit { color: #42474e; } .career-s4 .item p { color: #42474e; line-height: 1.6; margin-top: 10px; } .career-s4 .item:nth-of-type(even) { transform: translateY(2.5rem); } @media (any-hover: hover) { .career-s4 .item:hover img { transform: scale(1.1); } } .career-s4 .swiper-control { position: relative; width: 33.75rem; height: 12px; margin: 2.5rem auto 0; padding: 4px 2.5rem; } .career-s4 .swiper-scrollbar { height: 4px; } .career-s4 .swiper-scrollbar-drag { background-color: #00639d; } .career-s4 .button { width: 7px; height: 12px; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; margin-top: -6px; cursor: pointer; transition: transform .3s ease; will-change: transform; } .career-s4 .prev { left: 0; background-image: url("../images/career/prev.svg"); } @media (any-hover: hover) { .career-s4 .prev:hover { transform: translateX(-3px); } } .career-s4 .next { right: 0; background-image: url("../images/career/next.svg"); } @media (any-hover: hover) { .career-s4 .next:hover { transform: translateX(3px); } } .career-s5 { padding-bottom: 7.5rem; position: relative; z-index: 1; } .career-s5 .items { margin-bottom: 2.5rem; border-bottom: 1px solid #e6e6e6; } .career-s5 .item { border-top: 1px solid #e6e6e6; position: relative; } .career-s5 .item:before { content: ''; position: absolute; width: 100%; left: 0; top: 10px; bottom: 10px; background-color: #f2f7fa; border-radius: 10px; z-index: 1; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .career-s5 .item .box { position: relative; z-index: 2; padding: 3.75rem 15rem 3.75rem 2.5rem; } .career-s5 .item .tit { color: #42474e; } .career-s5 .item .opa { display: none; opacity: 0; } .career-s5 .item .info { font-size: 0; margin: 1rem 0; } .career-s5 .item .info span { display: inline-block; vertical-align: top; color: #42474e; } .career-s5 .item .info span:before { content: ''; width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .career-s5 .item .info span.addr { margin-right: 2.5rem; } .career-s5 .item .info span.addr:before { background-image: url("../images/career/icon-3.png"); } .career-s5 .item .info span.date:before { background-image: url("../images/career/icon-4.png"); } .career-s5 .item p { color: #42474e; line-height: 1.5rem; } .career-s5 .item a { position: absolute; top: 2.8125rem; right: 2.5rem; width: 7.5rem; line-height: 3.75rem; text-align: center; background-color: #00639d; border-radius: 5px; color: #fff; } @media (any-hover: hover) { .career-s5 .item:hover:before { opacity: 1; } .career-s5 .item:hover .opa { display: block; animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } } .career-s6 { padding: 5rem 0 7.5rem; } .career-s6 .label { color: #42474e; } .career-s6 .info { position: relative; padding: 3.75rem 0; font-size: 0; border-bottom: 4px solid #00639d; } .career-s6 .info span { display: inline-block; vertical-align: top; color: #42474e; } .career-s6 .info span:before { content: ''; width: 14px; height: 14px; background-position: center; background-repeat: no-repeat; background-size: contain; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .career-s6 .info span.addr { margin-right: 2.5rem; } .career-s6 .info span.addr:before { background-image: url("../images/career/icon-3.png"); } .career-s6 .info span.date:before { background-image: url("../images/career/icon-4.png"); } .career-s6 .share { position: absolute; right: 0; top: 50%; margin-top: -24px; } .career-s6 .share a { position: relative; display: inline-block; vertical-align: top; width: 48px; height: 48px; border: 1px solid #eaeced; border-radius: 3px; margin-left: 10px; overflow: hidden; } .career-s6 .share a:nth-of-type(1) { margin-left: 0; } .career-s6 .share a:before { content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; background-color: #00639d; z-index: 1; opacity: 0; transition: opacity .3s ease; } .career-s6 .share a:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; z-index: 2; transition: all .3s ease; } .career-s6 .share a.wechat:after { background-image: url("../images/media/share-1.png"); } @media (any-hover: hover) { .career-s6 .share a.wechat:hover:after { background-image: url("../images/media/share-1-1.png"); } } .career-s6 .share a.fb:after { background-image: url("../images/media/share-2.png"); } @media (any-hover: hover) { .career-s6 .share a.fb:hover:after { background-image: url("../images/media/share-2-1.png"); } } .career-s6 .share a.linkedin:after { background-image: url("../images/media/share-3.png"); } @media (any-hover: hover) { .career-s6 .share a.linkedin:hover:after { background-image: url("../images/media/share-3-1.png"); } } .career-s6 .share a.twi:after { background-image: url("../images/media/share-4.png"); } @media (any-hover: hover) { .career-s6 .share a.twi:hover:after { background-image: url("../images/media/share-4-1.png"); } } @media (any-hover: hover) { .career-s6 .share a:hover:before { opacity: 1; } } .career-s6 .item { margin-top: 3.75rem; } .career-s6 .item .tit { padding-bottom: 10px; border-bottom: 1px solid #e6e6e6; display: flex; justify-content: space-between; cursor: pointer; } .career-s6 .item .tit:after { content: ''; width: 1.25rem; height: 1.25rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/portfolio/icon-1-1.svg"); } .career-s6 .item .tit span { max-width: calc(100% - 3.75rem); color: #42474e; } .career-s6 .item .para { margin-top: 2rem; color: #42474e; line-height: 1.8; } .career-s6 .item .para.indent { text-indent: 2em; } .career-s6 .item.hide .tit:after { background-image: url("../images/portfolio/icon-1-2.svg"); } .career-s6 .tips { padding-top: 3.75rem; margin-top: 3.75rem; color: #42474e; line-height: 1.6; border-top: 1px solid #e6e6e6; } .career-s6 .tips a { display: inline-block; color: #00639d; } .career-s6 a.apply { display: block; color: #fff; line-height: 5rem; text-align: center; background-color: #00639d; border-radius: 10px; margin-top: 3.75rem; transition: all .3s ease; } @media (any-hover: hover) { .career-s6 a.apply:hover { box-shadow: 0 1.25rem 2.5rem rgba(0, 99, 157, 0.3); transform: translateY(-3px); } } .career-s7 { padding: 7.5rem 0; } .career-s7 .c-label .tit { color: #42474e; } .career-s7 .items { margin-top: 3.75rem; display: flex; } .career-s7 .item { flex: 1; height: 30rem; margin-left: 1.5rem; -webkit-perspective: 800px; perspective: 800px; cursor: pointer; } .career-s7 .item .box { position: relative; height: 100%; will-change: transform; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .5s ease; } .career-s7 .item .show { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; background-color: #f2f7fa; -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 2; } .career-s7 .item .show:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 1.75rem; bottom: 1.75rem; border-radius: 50%; background-position: center; background-repeat: no-repeat; background-image: url("../images/career/icon-5.svg"); background-size: auto 1.5rem; transition: all .3s ease; } .career-s7 .item .hide { position: relative; width: 100%; height: 100%; padding: 2.5rem; border-radius: 10px; overflow: hidden; background-color: #f2f7fa; transform: rotateY(-180deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; } .career-s7 .item .hide:after { content: ''; width: 3rem; height: 3rem; position: absolute; right: 1.75rem; bottom: 1.75rem; background-color: #00639d; border-radius: 50%; background-position: center; background-repeat: no-repeat; transform: rotate(45deg); background-image: url("../images/career/icon-5-1.svg"); background-size: auto 1.5rem; } .career-s7 .item .img-box { overflow: hidden; } .career-s7 .item img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } .career-s7 .item .txt-box { padding: 2.5rem; } .career-s7 .item .tit { color: #42474e; } .career-s7 .item .para { color: #42474e; line-height: 1.6; margin-top: 1.25rem; } .career-s7 .item:nth-of-type(1) { margin: 0; } @media screen and (min-width: 769px) { .career-s7 .item:nth-of-type(even) { margin-top: 3.75rem; } } .career-s7 .item.active .box { transform: rotateY(180deg); } @media (any-hover: hover) { .career-s7 .item:hover img { transform: scale(1.1); } .career-s7 .item:hover .show:after { background-color: #00639d; background-image: url("../images/career/icon-5-1.svg"); } } .career-s8 { padding: 3.75rem 0 7.5rem; } .career-s8 .items { margin-top: 2.5rem; border-bottom: 1px solid #e6e6e6; } .career-s8 .item { border-top: 1px solid #e6e6e6; position: relative; } .career-s8 .item:before { content: ''; position: absolute; width: 100%; left: 0; top: 10px; bottom: 10px; background-color: #f2f7fa; border-radius: 10px; z-index: 1; opacity: 0; transition: opacity .3s ease; will-change: opacity; } .career-s8 .item .box { position: relative; z-index: 2; } .career-s8 .item .tit { color: #42474e; padding: 3.75rem 6.25rem 3.75rem 2.5rem; position: relative; cursor: pointer; } .career-s8 .item .tit:after { content: ''; width: 15px; height: 8px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/career/icon-6.png"); position: absolute; right: 2.5rem; top: 50%; margin-top: -4px; transition: transform .3s ease; will-change: transform; } .career-s8 .item .para { color: #42474e; line-height: 1.5rem; margin-top: -1.5rem; display: none; padding: 0 2.5rem 3.75rem; } .career-s8 .item.active:before { opacity: 1; } .career-s8 .item.active .tit:after { transform: rotate(180deg); } .investor-s1 { background-position: center; background-repeat: no-repeat; background-size: cover; } .investor-s1.style-1 { padding: 7.5rem 0; background-image: url("../images/investor/img-1.jpg"); } .investor-s1.style-1 .items { margin-top: 7.5rem; } .investor-s1.style-1 .item p { color: #42474e; } .investor-s1.style-1 .item .num span { color: #00639d; } .investor-s1.style-1 .item .num i { color: #42474e; } .investor-s1.style-2 { padding: 11.25rem 0; background-image: url("../images/investor/img-5.jpg"); } .investor-s1.style-2 .item p { color: #ffffff; } .investor-s1.style-2 .item .num span { color: #ffffff; } .investor-s1.style-2 .item .num i { color: #ffffff; } .investor-s1 .para { margin-top: 2.5rem; color: #42474e; line-height: 1.8; text-align: center; } .investor-s1 .items { display: flex; justify-content: space-between; } .investor-s1 .item { width: 15rem; text-align: center; font-size: 0; } .investor-s1 .item .num { margin-top: 2.5rem; margin-bottom: 10px; } .investor-s1 .item .num i { font-style: normal; margin-left: 5px; } .investor-s1 a.more { display: block; width: 15rem; margin: 7.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .investor-s1 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .investor-s2 { padding: 7.5rem 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/investor/img-2.jpg"); } .investor-s2 .c-label .tit { color: #fff; } .investor-s2 .cont { font-size: 0; margin-top: 2.5rem; display: flex; } .investor-s2 .box { display: inline-block; vertical-align: middle; width: calc(100% - 30.25rem); border-radius: 10px; background: #fff url("../images/investor/img-3.png") center bottom no-repeat; background-size: 100% auto; position: relative; padding: 2.5rem; } .investor-s2 .box span { position: absolute; top: 2.5rem; right: 2.5rem; background-color: #00a0e9; line-height: 24px; color: #fff; border-radius: 3px; padding: 0 1rem; } .investor-s2 .box .img-box { position: absolute; top: 2.5rem; right: 2.5rem; } .investor-s2 .box .img-box img { display: block; height: 2.5rem; } .investor-s2 .box .s-tit { color: #42474e; } .investor-s2 .box .s-tit a { color: #42474e; } .investor-s2 .box .tit { color: #42474e; margin-top: 10px; } .investor-s2 .box .tit a { color: #42474e; } .investor-s2 .box .price { margin-top: 7.5rem; color: #00639d; } .investor-s2 .box .stock { color: #ff0000; } .investor-s2 .box .tip { color: #42474e; margin-top: 2.5rem; } .investor-s2 .link { display: inline-block; vertical-align: middle; width: 28.75rem; margin-left: 1.5rem; } .investor-s2 .link a { display: block; position: relative; padding: 1.5rem 2.5rem; margin-top: -1px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .investor-s2 .link a:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .investor-s2 .link a span { display: block; color: #fff; position: relative; padding-right: 2.5rem; } .investor-s2 .link a span:after { content: ''; width: 1.375rem; height: 1rem; position: absolute; right: 0; top: 50%; transform: translateY(-50%); background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/investor/icon-1-1.svg"); transition: all .3s ease; } .investor-s2 .link a:before, .investor-s2 .link a:after { content: ''; width: 100%; height: 1px; background-color: #00a0e9; position: absolute; left: 0; transform: scaleX(0); } .investor-s2 .link a:before { top: 0; transform-origin: left top; } .investor-s2 .link a:after { bottom: 0; transform-origin: right top; } @media (any-hover: hover) { .investor-s2 .link a:hover:before, .investor-s2 .link a:hover:after { transform: scaleX(1); transition: transform .5s ease; } } .investor-s2 .n-box { width: 28.75rem; margin-left: 1.5rem; border-radius: 10px; background: #fff url("../images/investor/img-3-1.png") center bottom no-repeat; background-size: 100% auto; padding: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; align-content: space-between; } .investor-s2 .n-box .img-box { width: 13.25rem; } .investor-s2 .n-box .img-box img { display: block; width: 100%; } .investor-s2 .n-box span { color: #42474e; } .investor-s2 .n-box a { display: block; width: 15rem; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .investor-s2 .n-box a:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .investor-s2 .n-box-1 { width: 28.75rem; margin-left: 1.5rem; border-radius: 10px; background: #fff url("../images/investor/img-3-1.png") center bottom no-repeat; background-size: 100% auto; padding: 2.5rem; } .investor-s2 .n-box-1 .tit { color: #42474e; } .investor-s2 .n-box-1 .tit:after { content: ''; width: 3.75rem; height: 1px; background-color: #00a0e9; display: block; margin-top: 1.5rem; } .investor-s2 .n-box-1 .para { margin-top: 1.5rem; line-height: 1.6; color: #42474e; } .investor-s2 .n-box-1 .para a { color: #00639d; display: inline-block; } .investor-s3 { padding: 7.5rem 0; } .investor-s3 .items { margin-top: 2.5rem; position: relative; } .investor-s3 .item { height: auto; background-color: #f2f7fa; border-radius: 10px; } .investor-s3 .item a { display: block; height: 100%; padding: 2.5rem; } .investor-s3 .item .date span, .investor-s3 .item .date i { display: block; } .investor-s3 .item .date span { color: #42474e; } .investor-s3 .item .date i { font-style: normal; color: #42474e; } .investor-s3 .item .tit { color: #42474e; line-height: 2rem; height: 4rem; margin-top: 6.25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .investor-s3 .item p { color: #42474e; line-height: 1.6; margin-top: 10px; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .investor-s3 .button { width: 3rem; height: 3rem; background-position: center; background-repeat: no-repeat; background-size: contain; position: absolute; top: 50%; margin-top: -1.5rem; cursor: pointer; } .investor-s3 .prev { left: -11.25rem; background-image: url("../images/index/left-1.svg"); } .investor-s3 .next { right: -11.25rem; background-image: url("../images/index/right-1.svg"); } .investor-s3 a.more { display: block; width: 15rem; margin: 2.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .investor-s3 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .investor-s4 { padding: 3.75rem 0 7.5rem; } .investor-s4 .items { margin-top: 2.5rem; display: flex; } .investor-s4 .item { flex: 1; padding: 0 4.375rem; } .investor-s4 .item a { display: block; } .investor-s4 .item img { display: block; width: 100%; } .investor-s4 .item span { display: block; text-align: center; color: #42474e; margin-top: 1.5rem; transition: color .3s ease; } .investor-s4 .item:nth-of-type(2) { border-left: 1px solid #e6e6e6; } @media (any-hover: hover) { .investor-s4 .item:hover span { color: #00639d; } } .investor-s4 a.more { display: block; width: 15rem; margin: 2.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .investor-s4 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .investor-s5 { padding: 7.5rem 0; } .investor-s5 .para { color: #42474e; line-height: 1.8; text-align: justify; } .investor-s6 { padding: 5.625rem 0 7.5rem; } .investor-s6 .link { font-size: 0; text-align: center; margin-bottom: 2.5rem; } .investor-s6 .link a { display: inline-block; vertical-align: top; width: 15rem; line-height: calc(3.375rem - 2px); border-radius: 5px; border: 1px solid #e6e6e6; color: #42474e; margin-left: 1.5rem; transition: all .3s ease; } .investor-s6 .link a:nth-of-type(1) { margin-left: 0; } .investor-s6 .link a.active { background-color: #00639d; color: #fff; border-color: #00639d; } @media (any-hover: hover) { .investor-s6 .link a:hover { background-color: #00639d; color: #fff; border-color: #00639d; } } .investor-s6 .items { margin-bottom: 2.5rem; } .investor-s6 .item { border-top: 1px solid #e6e6e6; position: relative; } .investor-s6 .item:before, .investor-s6 .item:after { content: ''; width: 100%; height: 1px; background-color: #00639d; position: absolute; left: 0; transform: scaleX(0); } .investor-s6 .item:before { top: 0; transform-origin: left top; } .investor-s6 .item:after { bottom: 0; transform-origin: right top; } .investor-s6 .item a { display: flex; align-items: flex-start; padding: 2.5rem; } .investor-s6 .item .date { width: 16.25rem; } .investor-s6 .item .date span, .investor-s6 .item .date i { display: block; } .investor-s6 .item .date span { color: #42474e; } .investor-s6 .item .date i { font-style: normal; color: #42474e; } .investor-s6 .item .txt-box { width: calc(100% - 16.25rem); } .investor-s6 .item .tit { color: #42474e; } .investor-s6 .item .s-date { color: #00639d; margin-top: 1.5rem; } .investor-s6 .item p { color: #42474e; line-height: 1.6; margin-top: 1.5rem; text-align: justify; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .investor-s6 .item.nop a { align-items: center; } .investor-s6 .item:last-of-type { border-bottom: 1px solid #e6e6e6; } @media (any-hover: hover) { .investor-s6 .item:hover:before, .investor-s6 .item:hover:after { transform: scaleX(1); transition: transform .5s ease; } } .investor-s7 { padding: 7.5rem 0; } .investor-s7 .item { border-bottom: 1px solid #e6e6e6; position: relative; padding: 1.5rem 0; } .investor-s7 .item:before { content: ''; width: 100%; height: 1px; background-color: #00639d; position: absolute; left: 0; transform: scaleX(0); } .investor-s7 .item:before { bottom: 0; transform-origin: left top; } .investor-s7 .item .img-box { width: 50%; } .investor-s7 .item .img-box img { display: block; width: 100%; } .investor-s7 .item .txt-box { width: 50%; position: absolute; top: 50%; transform: translateY(-50%); } .investor-s7 .item .tit { color: #42474e; transition: color .3s ease; } .investor-s7 .item .btns { margin-top: 3.75rem; font-size: 0; } .investor-s7 .item .btns a { display: inline-block; vertical-align: top; width: 12.5rem; line-height: 3.375rem; text-align: center; color: #fff; background-color: #00639d; border-radius: 5px; transition: all .3s ease; } .investor-s7 .item .btns a:nth-of-type(2) { margin-left: 10px; } @media (any-hover: hover) { .investor-s7 .item .btns a:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } @media screen and (min-width: 769px) { .investor-s7 .item:nth-of-type(odd) .txt-box { right: 0; } .investor-s7 .item:nth-of-type(even) .img-box { margin-left: 50%; } .investor-s7 .item:nth-of-type(even) .txt-box { left: 0; padding-left: 7.5rem; } } @media (any-hover: hover) { .investor-s7 .item:hover:before { transform: scaleX(1); transition: transform .5s ease; } .investor-s7 .item:hover .tit { color: #00639d; } } .investor-s8 { padding: 7.5rem 0; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/investor/img-7.jpg"); } .investor-s8 .c-label .tit { color: #fff; } .investor-s8 .para { color: #fff; line-height: 1.8; text-align: justify; margin-top: 2.5rem; height: 216px; overflow: hidden; } .investor-s8 .para.open { height: auto !important; } .investor-s8 span.loadmore { display: block; width: 24px; height: 24px; margin: 2.5rem auto 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/portfolio/icon-2-2.svg"); cursor: pointer; } .investor-s8 span.loadmore.open { background-image: url("../images/portfolio/icon-2-1.svg"); } .investor-s9 { padding-bottom: 7.5rem; background: url("../images/investor/img-8.jpg") center bottom no-repeat; background-size: 100% auto; } .investor-s9 .para { margin-top: 2.5rem; color: #42474e; text-align: center; } .investor-s9 .para a { display: inline-block; color: #00639d; } .investor-s10 { padding: 7.5rem 0; } .investor-s10 .para { line-height: 1.8; color: #42474e; text-align: justify; } .investor-s10 table { width: 100%; margin-top: 2.5rem; border: 1px solid #e6e6e6; } .investor-s10 table td { color: #42474e; padding: 1.5rem; } .investor-s10 table td a { color: #00639d; display: inline-block; margin-left: 5rem; } @media screen and (min-width: 769px) { .investor-s10 table td:nth-of-type(1) { width: 23.75rem; } .investor-s10 table td:nth-of-type(2) { width: 17.5rem; } } .investor-s11 { padding: 7.5rem 0; } .investor-s11 .label { color: #42474e; } .investor-s11 .items { margin-top: 3.75rem; display: flex; } .investor-s11 .item { flex: 1; } .investor-s11 .item .tit { color: #00639d; padding-left: 1.25rem; border-left: 4px solid #00639d; } .investor-s11 .item .info { border: 1px solid #e6e6e6; margin-top: 1rem; padding: 2.5rem 2.5rem 3.75rem; } .investor-s11 .item .info span { display: block; color: #42474e; } .investor-s11 .item .info .para { margin-top: 2rem; color: #42474e; line-height: 2; } .investor-s11 .item:nth-of-type(2) { margin-left: 1.5rem; } .investor-s12 { padding: 7.5rem 0; } .investor-s12 .items { margin-top: 2.5rem; position: relative; font-size: 0; } .investor-s12 .item { display: inline-block; vertical-align: top; width: calc((100% - 3rem) / 2); background-color: #f2f7fa; border-radius: 10px; position: relative; overflow: hidden; transition: all .3s ease; } .investor-s12 .item:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../images/investor/img-9.png") center top no-repeat; background-size: 100% auto; z-index: 1; opacity: 0; transition: opacity .3s ease; } .investor-s12 .item a { display: block; height: 22.5rem; padding: 2.5rem; position: relative; z-index: 2; } .investor-s12 .item .date:after { content: ''; width: 1.5rem; height: 4px; background-color: #00639d; display: block; margin-top: 1rem; } .investor-s12 .item .date span, .investor-s12 .item .date i { display: block; transition: color .3s ease; } .investor-s12 .item .date span { color: #42474e; } .investor-s12 .item .date i { font-style: normal; color: #42474e; } .investor-s12 .item .tit { color: #42474e; margin-top: 6.25rem; position: absolute; bottom: 0; left: 0; right: 0; padding: 0 2.5rem 2.5rem; transition: color .3s ease; } .investor-s12 .item:nth-of-type(2) { margin-left: 3rem; } @media (any-hover: hover) { .investor-s12 .item:hover { background-color: #00639d; box-shadow: 0 0.625rem 1.875rem rgba(0, 99, 157, 0.3); } .investor-s12 .item:hover:before { opacity: 1; } .investor-s12 .item:hover .date span, .investor-s12 .item:hover .date i { color: #fff; } .investor-s12 .item:hover .date:after { background-color: #00a0e9; } .investor-s12 .item:hover .tit { color: #fff; } } .investor-s12 a.more { display: block; width: 15rem; margin: 2.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .investor-s12 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .media-s1 { padding: 5.625rem 0 7.5rem; } .media-s1 .filter { padding: 0 7.5rem; font-size: 0; position: relative; z-index: 2; } .media-s1 .filter .form { display: inline-block; vertical-align: top; width: calc(100% - 19rem); height: 54px; background-color: #f2f7fa; border-radius: 8px; position: relative; } .media-s1 .filter .form input { display: block; width: 100%; height: 100%; padding: 0 1.875rem; color: #42474e; background-color: transparent; } .media-s1 .filter .form button { width: 48px; height: 48px; position: absolute; top: 3px; right: 3px; background-color: #00639d; background-position: center; background-repeat: no-repeat; background-image: url("../images/media/icon-1.png"); background-size: auto 18px; border-radius: 8px; cursor: pointer; } .media-s1 .filter .year-box { display: inline-block; vertical-align: top; width: 17.5rem; margin-left: 1.5rem; position: relative; } .media-s1 .filter .year-box span { display: block; border: 1px solid #00639e; border-radius: 8px; line-height: 52px; color: #42474e; padding: 0 1.875rem; position: relative; cursor: pointer; z-index: 2; } .media-s1 .filter .year-box span:after { content: ''; width: 12px; height: 7px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/media/icon-2.png"); position: absolute; right: 1.875rem; top: 50%; margin-top: -3px; } .media-s1 .filter .year-box .hide { position: absolute; top: 50%; left: 0; width: 100%; background-color: #fff; padding: calc(27px + 2rem) 1.875rem 2rem; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); border-radius: 0 0 8px 8px; display: none; } .media-s1 .filter .year-box .hide a { display: inline-block; vertical-align: top; width: 25%; color: #42474e; text-align: center; } @media (any-hover: hover) { .media-s1 .filter .year-box .hide a:hover { color: #00639e; } } .media-s1 .filter .year-box.open .hide { display: block; } .media-s1 .items { margin: 2.5rem 0; display: flex; flex-wrap: wrap; } .media-s1 .item { position: relative; width: calc((100% - 3.75rem) / 2); border-bottom: 1px solid #e6e6e6; } .media-s1 .item:before { content: ''; width: 100%; height: 1px; background-color: #00639e; position: absolute; left: 0; top: -1px; transform: scaleX(0); transform-origin: left top; will-change: transform; } .media-s1 .item a { display: flex; align-items: flex-start; padding: 2.5rem 0; } .media-s1 .item .img-box { width: calc(50% - 1.25rem); border-radius: 10px; overflow: hidden; } .media-s1 .item img { display: block; width: 100%; height: 11.25rem; object-fit: cover; transition: transform .5s ease; will-change: transform; } .media-s1 .item .txt-box { width: calc(50% + 1.25rem); padding-left: 2.5rem; } .media-s1 .item .date { color: #42474e; } .media-s1 .item .tit { line-height: 1.6; color: #42474e; margin-top: 1.5rem; transition: color .3s ease; } .media-s1 .item p { line-height: 1.6; color: #42474e; margin-top: 1.5rem; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; display: none; } @media screen and (min-width: 769px) { .media-s1 .item:nth-of-type(even) { margin-left: 3.75rem; } .media-s1 .item:nth-of-type(1), .media-s1 .item:nth-of-type(2) { border-top: 1px solid #e6e6e6; } } @media (any-hover: hover) { .media-s1 .item:hover:before { transform: scaleX(1); transition: transform .5s ease; } .media-s1 .item:hover img { transform: scale(1.1); } .media-s1 .item:hover .tit { color: #00639d; } } .media-s2 { padding: 5rem 0 7.5rem; } .media-s2 .top-block .tit { color: #42474e; } .media-s2 .top-block .date { color: #00639d; margin-top: 2.5rem; } .media-s2 .top-block .date:before { content: ''; width: 14px; height: 14px; display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/media/icon-3.png"); } .media-s2 .top-block .para { text-align: justify; } .media-s2 .top-block .para p { margin-top: 1.5rem; } .media-s2 .top-block .para p:nth-of-type(1) { margin-top: 0; } .media-s2 .share { position: relative; padding: 2.5rem 0; text-align: center; font-size: 0; } .media-s2 .share:before { content: ''; width: 100%; height: 4px; position: absolute; left: 0; top: calc(50% - 2px); background-color: #00639d; z-index: 1; } .media-s2 .share .box { padding: 0 2.5rem; background-color: #fff; display: inline-block; vertical-align: top; position: relative; z-index: 2; } .media-s2 .share a { position: relative; display: inline-block; vertical-align: top; width: 48px; height: 48px; border: 1px solid #eaeced; border-radius: 3px; margin-left: 10px; overflow: hidden; } .media-s2 .share a:nth-of-type(1) { margin-left: 0; } .media-s2 .share a:before { content: ''; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; background-color: #00639d; z-index: 1; opacity: 0; transition: opacity .3s ease; } .media-s2 .share a:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; z-index: 2; transition: all .3s ease; } .media-s2 .share a.wechat:after { background-image: url("../images/media/share-1.png"); } @media (any-hover: hover) { .media-s2 .share a.wechat:hover:after { background-image: url("../images/media/share-1-1.png"); } } .media-s2 .share a.fb:after { background-image: url("../images/media/share-2.png"); } @media (any-hover: hover) { .media-s2 .share a.fb:hover:after { background-image: url("../images/media/share-2-1.png"); } } .media-s2 .share a.linkedin:after { background-image: url("../images/media/share-3.png"); } @media (any-hover: hover) { .media-s2 .share a.linkedin:hover:after { background-image: url("../images/media/share-3-1.png"); } } .media-s2 .share a.twi:after { background-image: url("../images/media/share-4.png"); } @media (any-hover: hover) { .media-s2 .share a.twi:hover:after { background-image: url("../images/media/share-4-1.png"); } } @media (any-hover: hover) { .media-s2 .share a:hover:before { opacity: 1; } } .media-s2 .bot-block { margin-top: 5rem; } .media-s2 .bot-block .items { display: flex; margin-top: 1.5rem; } .media-s2 .bot-block .item { flex: 1; margin-left: 1.5rem; } .media-s2 .bot-block .item:nth-of-type(1) { margin: 0; } .media-s2 .bot-block .item .img-box { border-radius: 12px; overflow: hidden; } .media-s2 .bot-block .item img { display: block; width: 100%; height: 16.3125rem; object-fit: cover; transition: transform .5s ease; will-change: transform; } .media-s2 .bot-block .item .txt-box { padding: 2.5rem 2.5rem 0; } .media-s2 .bot-block .item .tit { color: #42474e; line-height: 1.6; } @media (any-hover: hover) { .media-s2 .bot-block .item:hover img { transform: scale(1.1); } } .media-s3 { padding: 3.75rem 0; border-bottom: 1px solid #e6e6e6; } .media-s3 .flex { display: flex; } .media-s3 a { flex: 1; margin-left: 1.5rem; border: 1px solid #e6e6e6; border-radius: 10px; padding: 1.875rem; position: relative; } .media-s3 a:after { content: ''; width: 100%; height: 4px; background-color: #00639d; position: absolute; bottom: 0; left: 0; transform: scaleX(0); transform-origin: left top; } .media-s3 a i { display: block; width: 4.125rem; height: 4.125rem; margin: 0 auto; background-position: center; background-repeat: no-repeat; background-size: contain; } .media-s3 a span { display: block; color: #42474e; text-align: center; } .media-s3 a:nth-of-type(1) { margin-left: 0; } .media-s3 a.active:after { transform: scaleX(1); } @media (any-hover: hover) { .media-s3 a:hover:after { transform: scaleX(1); transition: transform .5s ease; } } .media-s4 { padding: 3.75rem 0 7.5rem; } .media-s4 .flex { display: flex; border-radius: 10px; overflow: hidden; } .media-s4 .img-box { width: 66.66%; } .media-s4 .img-box img { display: block; width: 100%; } .media-s4 .txt-box { width: 33.34%; background: #00639d url("../images/media/img-5.png") center bottom no-repeat; background-size: 100% auto; text-align: center; } .media-s4 .txt-box span { display: block; color: #fff; } .media-s4 .txt-box a { display: inline-block; color: #fff; margin-top: 5.625rem; } .media-s4 .txt-box a:before { content: ''; width: 1.375rem; height: 1.875rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/media/icon-5.png"); display: inline-block; vertical-align: middle; margin: -2px 10px 0 0; } .media-s4 .para { padding: 3.75rem 7.5rem 0; color: #42474e; line-height: 1.6; text-align: justify; } .media-s5 { padding: 3.75rem 0 7.5rem; } .media-s5 .items { display: flex; flex-wrap: wrap; } .media-s5 .item { display: block; width: calc((100% - 1.5rem) / 2); height: 25rem; margin: 1.5rem 1.5rem 0 0; position: relative; border-radius: 10px; overflow: hidden; } .media-s5 .item:nth-of-type(1) { background-color: #f2f7fa; } .media-s5 .item:nth-of-type(2) { background-color: #00639d; } .media-s5 .item:nth-of-type(3) { background-color: #f2f7fa; } .media-s5 .item:nth-of-type(4) { background-color: #00639d; } .media-s5 .item .cell-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; } .media-s5 .item .show { z-index: 1; } .media-s5 .item .show img { width: 15.25rem; } .media-s5 .item .hide { background-color: rgba(0, 99, 157, 0.95); opacity: 0; transition: opacity .3s ease; will-change: opacity; z-index: 2; } .media-s5 .item .tit { color: #fff; } @media screen and (min-width: 769px) { .media-s5 .item:nth-of-type(1), .media-s5 .item:nth-of-type(2) { margin-top: 0; } .media-s5 .item:nth-of-type(even) { margin-right: 0; } } .media-s5 .item span { display: block; margin-top: 1rem; color: #fff; } @media (any-hover: hover) { .media-s5 .item:hover .hide { opacity: 1; } } .media-s5 .para { padding: 3.75rem 7.5rem 0; color: #42474e; line-height: 1.6; text-align: justify; } .media-s6 { padding: 3.75rem 0 7.5rem; } .media-s6 .items { display: flex; flex-wrap: wrap; } .media-s6 .item { width: calc((100% - 3rem) / 3); margin: 1.5rem 1.5rem 0 0; border-radius: 10px; overflow: hidden; position: relative; cursor: pointer; } .media-s6 .item .img-box { position: relative; height: 100%; overflow: hidden; z-index: 1; } .media-s6 .item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; will-change: transform; } .media-s6 .item .hide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 99, 157, 0.9); opacity: 0; transition: opacity .3s ease; z-index: 2; will-change: opacity; } .media-s6 .item .hide:before { content: ''; width: 2.25rem; height: 2.25rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/media/icon-6.png"); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .media-s6 .item .hide span { position: absolute; bottom: 1.5rem; left: 0; right: 0; text-align: center; color: #fff; } @media screen and (min-width: 769px) { .media-s6 .item:nth-of-type(1), .media-s6 .item:nth-of-type(2), .media-s6 .item:nth-of-type(3) { margin-top: 0; } .media-s6 .item:nth-of-type(3n) { margin-right: 0; } } @media (any-hover: hover) { .media-s6 .item:hover img { transform: scale(1.1); } .media-s6 .item:hover .hide { opacity: 1; } } .media-s6 .para { padding: 3.75rem 7.5rem 0; color: #42474e; line-height: 1.6; text-align: justify; } .media-s7 { padding: 3.75rem 0 7.5rem; } .media-s7 .link { font-size: 0; text-align: center; margin-bottom: 2.5rem; } .media-s7 .link a { display: inline-block; vertical-align: top; width: 15rem; line-height: calc(3.375rem - 2px); border-radius: 5px; border: 1px solid #e6e6e6; color: #42474e; margin-left: 1.5rem; transition: all .3s ease; } .media-s7 .link a:nth-of-type(1) { margin-left: 0; } .media-s7 .link a.active { background-color: #00639d; color: #fff; border-color: #00639d; } @media (any-hover: hover) { .media-s7 .link a:hover { background-color: #00639d; color: #fff; border-color: #00639d; } } .media-s7 .items { display: flex; flex-wrap: wrap; } .media-s7 .item { width: calc((100% - 3rem) / 3); margin: 1.5rem 1.5rem 0 0; border-radius: 10px; overflow: hidden; position: relative; background-color: #f2f7fa; cursor: pointer; } .media-s7 .item .top-box { position: relative; } .media-s7 .item .top-box:after { content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; z-index: 2; transition: opacity .3s ease; } .media-s7 .item .top-box span { line-height: 24px; color: #fff; background-color: #00a0e9; padding: 0 10px; border-radius: 3px; position: absolute; top: 1.875rem; left: 1.875rem; z-index: 3; } .media-s7 .item .img-box { overflow: hidden; position: relative; z-index: 1; } .media-s7 .item img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } .media-s7 .item .bot-box { padding: 2.5rem; } .media-s7 .item .tit { color: #42474e; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .media-s7 .item .date { margin-top: 1.25rem; color: #42474e; display: none; } @media screen and (min-width: 769px) { .media-s7 .item:nth-of-type(1), .media-s7 .item:nth-of-type(2), .media-s7 .item:nth-of-type(3) { margin-top: 0; } .media-s7 .item:nth-of-type(3n) { margin-right: 0; } } @media (any-hover: hover) { .media-s7 .item:hover .top-box:after { opacity: 0; } .media-s7 .item:hover img { transform: scale(1.1); } } .media-s7 .para { padding: 3.75rem 7.5rem 0; color: #42474e; line-height: 1.6; text-align: justify; } .portfolio-s1 { padding: 7.5rem 0; } .portfolio-s1 .c-label .tit { color: #42474e; } .portfolio-s1 .img-box { width: 30rem; margin: 2.5rem auto 0; border-radius: 10px; overflow: hidden; display: none; } .portfolio-s1 .img-box img { display: block; width: 100%; } .portfolio-s1 .item { margin-top: 2.5rem; } .portfolio-s1 .item .para { color: #0f1e34; line-height: 1.6; text-align: justify; } .portfolio-s1 .item .para img { max-width: 100%; height: auto !important; } .portfolio-s1 .item .para span { display: block; border-bottom: 1px solid #e6e6e6; padding-bottom: 1rem; margin-bottom: 1rem; color: #0f1e34; } .portfolio-s1 .item .para a { display: inline-block; color: #00639d; } .portfolio-s1 .item.hide .tit:after { background-image: url("../images/portfolio/icon-1-2.svg"); } .portfolio-s2 { padding: 7.5rem 0; } .portfolio-s2 .c-label .tit { color: #42474e; } .portfolio-s2 .cont { margin-top: 5rem; } .portfolio-s2 .table .top-box { height: 5rem; display: flex; align-items: center; padding: 0 2.5rem; font-size: 0; background-image: linear-gradient(180deg, #009ce5, #00639d); border-radius: 2.5rem; box-shadow: 0 0.625rem 1.875rem rgba(0, 99, 157, 0.3); } .portfolio-s2 .table .top-box .flex { width: calc(100% - 35rem); display: flex; align-items: center; justify-content: space-between; } .portfolio-s2 .table .top-box i, .portfolio-s2 .table .top-box span { color: #fff; } .portfolio-s2 .table .top-box i { font-style: normal; } .portfolio-s2 .table .top-box i:nth-of-type(1) { width: 18rem; } .portfolio-s2 .table .top-box i:nth-of-type(2) { width: 17rem; } .portfolio-s2 .table .bot-box { margin-top: 10px; } .portfolio-s2 .table .box { position: relative; display: flex; align-items: center; min-height: 5.625rem; padding-left: 18rem; margin-top: 10px; background-color: #fff; border-radius: 2.8125rem; box-shadow: 0 1.875rem 1.875rem rgba(0, 99, 157, 0.05); } .portfolio-s2 .table .box:nth-of-type(1) { margin-top: 0; } .portfolio-s2 .table .box .cate { position: absolute; left: 0; top: 0; width: 18rem; height: 100%; background-image: linear-gradient(180deg, #8bd1f9, #0070ad); border-radius: 2.8125rem; padding: 4px; } .portfolio-s2 .table .box .cate:before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border: 1px dashed #fff; opacity: 0.6; border-radius: 2.5rem; } .portfolio-s2 .table .box .cate .cell-box { height: 100%; padding: 0 1.5rem; } .portfolio-s2 .table .box .cate span { color: #fff; } .portfolio-s2 .table .box .cate span i { font-style: normal; } .portfolio-s2 .table .items { padding: 10px 0 10px 2.5rem; width: 100%; } .portfolio-s2 .table .item { margin-top: 1rem; display: flex; align-items: center; } .portfolio-s2 .table .item:nth-of-type(1) { margin-top: 0; } .portfolio-s2 .table .item span { width: 17rem; color: #42474e; } .portfolio-s2 .table .item .line { width: calc(100% - 19.5rem); } .portfolio-s2 .table .item .ani { display: block; height: 1.25rem; border-radius: .625rem; background-image: linear-gradient(90deg, #ecf3f7, #3885b3); overflow: hidden; position: relative; transform: scaleX(0); transform-origin: left center; } .portfolio-s2 .table .item .ani:before { content: ''; width: calc(100% - 10px - 1rem); height: 100%; position: absolute; top: 0; left: 0; background: url("../images/portfolio/img-2.png") center left repeat-x; } .portfolio-s2 .table .item .ani:after { content: ''; width: 1rem; height: 1rem; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; position: absolute; right: 5px; top: 50%; transform: translateY(-50%) scale(0.75); transform-origin: right center; } .portfolio-s2 .table .item.active .ani { transform: scaleX(1); transition: transform 1s .2s ease; } .portfolio-s3 { padding: 7.5rem 0; } .portfolio-s3 .item .tit { border-bottom: 1px solid #e6e6e6; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .portfolio-s3 .item .tit:after { content: ''; width: 1.25rem; height: 1.25rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/portfolio/icon-1-2.svg"); } .portfolio-s3 .item .tit span { max-width: calc(100% - 3.75rem); line-height: 5rem; color: #42474e; transform: scale(0.66); transform-origin: left center; } .portfolio-s3 .item .para { padding: 2.5rem 0; color: #42474e; line-height: 1.8; border-bottom: 1px solid #e6e6e6; text-align: justify; display: none; } .portfolio-s3 .item .para a { display: block; color: #00639d; } .portfolio-s3 .item.active .tit:after { background-image: url("../images/portfolio/icon-1-1.svg"); } .portfolio-s3 .item.active .tit span { transform: scale(1); } .portfolio-s3 .item.active .para { display: block; } .portfolio-s4 { padding: 7.5rem 0; } .portfolio-s4 .c-label .tit { color: #42474e; text-align: left; } .portfolio-s4 .item { margin-top: 5.625rem; } .portfolio-s4 .item:nth-of-type(1) { margin-top: 0; } .portfolio-s4 .item:nth-of-type(1) .table { border-color: #00639d; } .portfolio-s4 .item:nth-of-type(1) .table .top-box { background-color: #00639d; } .portfolio-s4 .item:nth-of-type(1) .table .bot-box:before { background-color: #f2f7fa; } .portfolio-s4 .item:nth-of-type(2) .table { border-color: #143359; } .portfolio-s4 .item:nth-of-type(2) .table .top-box { background-color: #143359; } .portfolio-s4 .item:nth-of-type(2) .table .bot-box:before { background-color: #f3f5f7; } .portfolio-s4 .cont { margin-top: 1.25rem; } .portfolio-s4 .table { border-radius: 10px; border: 1px solid transparent; overflow: hidden; margin-top: 1rem; } .portfolio-s4 .table:nth-of-type(1) { margin-top: 0; } .portfolio-s4 .table .top-box { display: flex; } .portfolio-s4 .table .top-box span { color: #fff; padding: 1rem 2.5rem; border-left: 1px solid rgba(0, 0, 0, 0.1); } .portfolio-s4 .table .top-box span:nth-of-type(1) { width: 24%; border: none; } .portfolio-s4 .table .top-box span:nth-of-type(2) { width: 18%; } .portfolio-s4 .table .top-box span:nth-of-type(3) { width: 58%; } .portfolio-s4 .table .bot-box { position: relative; } .portfolio-s4 .table .bot-box:before { content: ''; position: absolute; top: .625rem; right: .625rem; bottom: .625rem; left: .625rem; border-radius: 5px; } .portfolio-s4 .table .bot-box .flex { display: flex; align-items: center; position: relative; z-index: 2; } .portfolio-s4 .table .bot-box .cell-box { padding: 1rem 2.5rem; border-left: 1px solid rgba(0, 0, 0, 0.1); height: 8.75rem; } .portfolio-s4 .table .bot-box .cell-box:nth-of-type(1) { width: 24%; border: none; } .portfolio-s4 .table .bot-box .cell-box:nth-of-type(2) { width: 18%; } .portfolio-s4 .table .bot-box .cell-box:nth-of-type(3) { width: 58%; } .portfolio-s4 .table .bot-box span { display: block; color: #42474e; } .portfolio-s4 .b-para { padding: 3.75rem 7.5rem 0; color: #42474e; line-height: 1.6; text-align: justify; } .portfolio-s4 .b-para a { display: inline-block; color: #00639d; } .portfolio-s5 { padding-top: 7.5rem; } .portfolio-s5 .c-label .tit { color: #42474e; text-align: left; } .portfolio-s5 .top-para { color: #42474e; line-height: 1.8; margin-top: 1.5rem; text-align: justify; } .portfolio-s5 .bot-para { margin-top: 2rem; padding: 0 7rem 3.75rem; border-bottom: 1px solid #e6e6e6; } .portfolio-s5 .bot-para p { position: relative; color: #42474e; line-height: 1.6; padding-left: 1.25rem; text-align: justify; } .portfolio-s5 .bot-para p:before { content: '·'; position: absolute; top: 0; left: 0; color: #42474e; line-height: 1.6; } .portfolio-s5 .bot-para p span { color: #00639d; } .portfolio-s5 .bot-para .tip { color: #42474e; line-height: 1.6; margin-top: 2rem; text-align: justify; } .portfolio-s6 { padding: 7.5rem 0; } .portfolio-s6 .c-label .tit { color: #42474e; text-align: left; } .portfolio-s6 .items { margin-top: 2.5rem; } .portfolio-s6 .item { padding-bottom: 2.5rem; margin-bottom: 2.5rem; border-bottom: 1px solid #e6e6e6; display: flex; align-items: center; } .portfolio-s6 .item:last-of-type { margin-bottom: 0; } .portfolio-s6 .item .img-box { width: 20rem; height: 11.25rem; border: 1px solid #e6e6e6; text-align: center; } .portfolio-s6 .item .img-box img { width: auto; max-width: 70%; max-height: 60%; } .portfolio-s6 .item .txt-box { width: calc(100% - 20rem); padding-left: 2.5rem; } .portfolio-s6 .item span { display: block; color: #42474e; } .portfolio-s6 .item p { color: #42474e; line-height: 1.6; text-align: justify; margin-top: 1.5rem; } .portfolio-s6 .tip { color: #42474e; line-height: 1.6; margin-top: 3.75rem; padding: 0 7.5rem; } .portfolio-s6 .tip a { display: inline-block; color: #00639d; } .portfolio-s7 { padding: 7.5rem 0; } .portfolio-s7 .c-label .tit { color: #42474e; text-align: left; } .portfolio-s7 .flex { display: flex; align-items: center; } .portfolio-s7 .img-box { width: 50%; border-radius: 10px; overflow: hidden; } .portfolio-s7 .img-box img { display: block; width: 100%; transition: transform .5s ease; will-change: transform; } @media (any-hover: hover) { .portfolio-s7 .img-box:hover img { transform: scale(1.1); } } .portfolio-s7 .txt-box { width: 50%; padding-left: 3.75rem; } .portfolio-s7 .para { color: #42474e; line-height: 1.6; text-align: justify; margin-top: 1.5rem; } .portfolio-s7 .para a { display: inline-block; color: #00639d; } .other-s1 { padding: 7.5rem 0; } .other-s1 .top-para { color: #42474e; line-height: 1.8; text-align: justify; } .other-s1 .top-list { margin-top: 2.5rem; padding: 0 7.5rem; } .other-s1 .top-list span { display: block; color: #42474e; } .other-s1 .top-list .para { color: #42474e; line-height: 1.8; margin-top: 1.25rem; } .other-s1 .block { margin-top: 3.75rem; padding-top: 3.75rem; border-top: 1px solid #e6e6e6; } .other-s1 .block .tit { color: #42474e; } .other-s1 .block .para { margin-top: 2.5rem; padding: 0 7.5rem; color: #42474e; line-height: 1.8; text-align: justify; } .other-s2 { padding: 7.5rem 0; } .other-s2 .block { margin-top: 5rem; } .other-s2 .block:nth-of-type(1) { margin-top: 0; } .other-s2 .block .tit { position: relative; border-bottom: 1px solid #e6e6e6; cursor: pointer; } .other-s2 .block .tit span { display: inline-block; padding: 0 3.75rem; color: #42474e; padding-bottom: 2rem; position: relative; } .other-s2 .block .tit span:after { content: ''; width: 100%; height: 1px; background-color: #00639d; position: absolute; bottom: -1px; left: 0; } .other-s2 .block .tit:after { content: ''; width: 1.5rem; height: 1.5rem; position: absolute; right: 3.75rem; top: 8px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/other/icon-3-1.svg"); } .other-s2 .block .para { color: #42474e; line-height: 1.8; margin-top: 2rem; padding: 0 7.5rem; text-align: justify; } .other-s2 .block.hide .tit:after { background-image: url("../images/other/icon-3-2.svg"); } .other-s3 { padding: 7.5rem 0; } .other-s3 .item { margin-top: 3.75rem; } .other-s3 .item:nth-of-type(1) { margin-top: 0; } .other-s3 .item .tit { color: #42474e; padding-bottom: 1rem; border-bottom: 1px solid #e6e6e6; } .other-s3 .item .link { margin-top: 1rem; font-size: 0; margin-right: -1.5rem; } .other-s3 .item .link a { display: inline-block; vertical-align: top; position: relative; width: auto; min-width: calc((100% - 6rem) / 4); margin: 1.5rem 1.5rem 0 0; border: 1px solid #e6e6e6; border-radius: 10px; color: #42474e; line-height: 3.75rem; padding: 0 calc(1.5rem + 10px) 0 1.5rem; transition: all .3s ease; } .other-s3 .item .link a:after { content: ''; width: 5px; height: 9px; position: absolute; right: 1.5rem; top: 50%; margin-top: -5px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/other/icon-4-1.png"); transition: all .3s ease; } @media (any-hover: hover) { .other-s3 .item .link a:hover { background-color: #00639d; color: #fff; } .other-s3 .item .link a:hover:after { background-image: url("../images/other/icon-4-2.png"); } } .contact-s1 { padding: 7.5rem 0; font-size: 0; } .contact-s1 .para { line-height: 1.6; color: #42474e; text-align: center; margin-top: 2rem; } .contact-s1 .tab-tit { margin-top: 3.75rem; font-size: 0; border-bottom: 1px solid #e6e6e6; text-align: center; } .contact-s1 .tab-tit span { display: inline-block; vertical-align: top; width: 15rem; color: #42474e; position: relative; padding-bottom: 1.25rem; cursor: pointer; transition: color .3s ease; } .contact-s1 .tab-tit span:after { content: ''; width: 100%; height: 4px; background-color: #00639d; position: absolute; bottom: -1px; left: 0; transform: scaleX(0); } .contact-s1 .tab-tit span.active { color: #00639d; } .contact-s1 .tab-tit span.active:after { transform: scaleX(1); transition: transform .3s ease; } @media (any-hover: hover) { .contact-s1 .tab-tit span:hover { color: #00639d; } .contact-s1 .tab-tit span:hover:after { transform: scaleX(1); transition: transform .3s ease; } } .contact-s1 .tab-cont { margin-top: 3.75rem; } .contact-s1 .tab-cont .child { display: none; } .contact-s1 .tab-cont .child.active { display: block; } .contact-s1 .tab-cont .child.active .img-box, .contact-s1 .tab-cont .child.active .txt-box { animation: o-upfade-top 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards; } .contact-s1 .tab-cont .child.active .txt-box { animation-delay: .1s; } .contact-s1 .tab-cont .img-box { width: 50%; display: inline-block; vertical-align: middle; border-radius: 10px; overflow: hidden; opacity: 0; } .contact-s1 .tab-cont .img-box img { display: block; width: 100%; transition: transform .5s ease; } @media (any-hover: hover) { .contact-s1 .tab-cont .img-box:hover img { transform: scale(1.1); } } .contact-s1 .tab-cont .txt-box { width: 50%; display: inline-block; vertical-align: middle; padding-left: 3.75rem; opacity: 0; } .contact-s1 .tab-cont .box { margin-top: 2.5rem; } .contact-s1 .tab-cont .box:nth-of-type(1) { margin-top: 0; } .contact-s1 .tab-cont .box span { display: block; color: #00639d; } .contact-s1 .tab-cont .box p { color: #42474e; margin-top: 1rem; } .contact-s2 { position: relative; overflow: hidden; z-index: 1; } .contact-s2:before, .contact-s2:after { content: ''; width: 100%; height: 30%; position: absolute; left: 0; z-index: 1; } .contact-s2:before { top: 0; background-image: linear-gradient(180deg, #fff, transparent); } .contact-s2:after { bottom: 0; background-image: linear-gradient(180deg, transparent, rgba(0, 99, 157, 0.8)); } .contact-s2 .map { height: 45rem; } .contact-s2 .map-box { height: 45rem; position: relative; } .contact-s2 .map-box .img-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; opacity: 0; transition: opacity .3s ease; } .contact-s2 .map-box .img-box img { display: block; width: 100%; height: 100%; object-fit: cover; } .contact-s2 .map-box .img-box.active { opacity: 1; } .contact-s2 .info { width: calc(40% - 7.5rem); max-width: 600px; height: 12.5rem; position: absolute; left: calc(50% + 7.5rem); bottom: calc(50% + 5rem); background-color: #00639d; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 99, 157, 0.3); z-index: 2; } .contact-s2 .info:before { content: ''; width: 14.375rem; height: 15rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/other/img-2.png"); position: absolute; right: 1.875rem; bottom: 0; } .contact-s2 .info:after { content: ''; width: 6.6875rem; height: 2rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/other/icon-2.png"); position: absolute; top: 99%; left: 3.75rem; } .contact-s2 .info .cell-box { height: 100%; } .contact-s2 .info .box { width: 55%; padding-left: 2.5rem; display: none; } .contact-s2 .info .box.active { display: block; } .contact-s2 .info span { display: block; color: #fff; } .contact-s2 .info p { line-height: 1.6; color: #fff; margin-top: 10px; } .contact-s3 { padding: 7.5rem 0; font-size: 0; } .contact-s3.nomt .form { margin-top: 0; } .contact-s3 .form { width: 66.66%; margin: 3.75rem auto 0; } .contact-s3 .item { margin-top: 1.875rem; } .contact-s3 .item:nth-of-type(1) { margin-top: 0; } .contact-s3 .item .tit { color: #42474e; } .contact-s3 .item .tit i { color: #00639d; display: inline-block; vertical-align: middle; margin-right: 10px; font-style: normal; transform: translateY(4px); } .contact-s3 .item.half { width: calc((100% - 1.5rem) / 2); display: inline-block; vertical-align: top; } .contact-s3 .item.ml { margin-top: 0; margin-left: 1.5rem; } .contact-s3 .box { margin-top: 1.25rem; position: relative; } .contact-s3 .box.yzm { width: calc((100% - 1.5rem) / 2); display: inline-block; vertical-align: bottom; } .contact-s3 input { display: block; width: 100%; height: calc(2.5rem + 20px); background-color: #f2f7fa; border-radius: 8px; padding: 0 5rem 0 1.25rem; color: #42474e; } .contact-s3 textarea { display: block; width: 100%; height: 10rem; background-color: #f2f7fa; border-radius: 8px; padding: 10px 5rem 10px 1.25rem; color: #42474e; resize: none; } .contact-s3 .maxl { position: absolute; right: 1.25rem; bottom: 1.25rem; line-height: 20px; color: #42474e; } .contact-s3 .code { display: inline-block; vertical-align: bottom; width: 9.0625rem; height: calc(2.5rem + 20px); margin-left: 1.5rem; border: 1px solid #e6e6e6; border-radius: 8px; overflow: hidden; } .contact-s3 .code img { display: block; width: 100%; height: 100%; } .contact-s3 button { display: block; width: 100%; height: calc(2.5rem + 20px); color: #fff; background-color: #00639d; cursor: pointer; border-radius: 8px; margin-top: 1.875rem; } .index-s1 { position: relative; } .index-s1 .item { position: relative; height: 100vh; overflow: hidden; } .index-s1 .item .img-box { height: 100%; position: relative; z-index: 1; } .index-s1 .item img { display: block; width: 100%; height: 100%; object-fit: cover; } .index-s1 .item .txt-box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; } .index-s1 .item span { display: block; width: 52rem; color: #0f1e34; } .index-s1 .item .tip { width: 52rem; color: #0f1e34; } .index-s1 .item p { width: 52rem; margin-top: 1.5rem; font-weight: 300; color: #0f1e34; } .index-s1 .item a { display: block; width: 15rem; margin-top: 3.75rem; line-height: 3.375rem; text-align: center; border: 2px solid rgba(15, 30, 52, 0.2); border-radius: 5px; font-weight: 300; color: #0f1e34; transition: all .3s ease; } .index-s1 .item a.gray { border-color: rgba(15, 30, 52, 0.2); color: #0f1e34; } @media (any-hover: hover) { .index-s1 .item a:hover { transform: translateY(-3px); border-color: #00639d; background-color: #00639d; color: #fff; box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .index-s1 .item.swiper-slide-active img { animation: scale-bg 6s linear forwards; } .index-s1 .pagination { position: absolute; bottom: 3.75rem; left: 0; right: 0; text-align: center; font-size: 0; z-index: 2; } .index-s1 .pagination span { display: inline-block; vertical-align: top; position: relative; margin-left: 1rem; cursor: pointer; } .index-s1 .pagination span:nth-of-type(1) { margin-left: 0; } .index-s1 .pagination span:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; box-sizing: border-box; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); opacity: 0; } .index-s1 .pagination span:after { content: ''; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; margin: -4px 0 0 -4px; } .index-s1 .pagination span svg { fill: none; stroke: #fff; stroke-width: 2px; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); } .index-s1 .pagination span.active:before { opacity: 1; } .index-s1 .pagination span.active svg { animation: indexsvg 5.5s linear forwards; } .index-s1 .button { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; cursor: pointer; opacity: 0; z-index: 2; transition: opacity .3s ease; } .index-s1 .button .btn { width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.5; transition: opacity .3s ease; } @media (any-hover: hover) { .index-s1 .button .btn:hover { opacity: 1; } } .index-s1 .button.show { opacity: 1; } .index-s1 .prev { left: 3.75rem; } .index-s1 .prev .btn { background-image: url("../images/index/left.svg"); } .index-s1 .next { right: 3.75rem; } .index-s1 .next .btn { background-image: url("../images/index/right.svg"); } .index-s2 { position: relative; padding: 10rem 0; overflow: hidden; } .index-s2 .img-box { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); } .index-s2 .img-box img { display: block; width: 100%; opacity: 0.3; } .index-s2 .tit { color: #00639d; text-align: center; } .index-s2 .para { color: #42474e; line-height: 1.8; font-weight: 300; margin-top: 1.5rem; text-align: center; } .index-s2 a.more { display: block; width: 15rem; margin: 7.5rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .index-s2 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .index-s3 { height: 100vh; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-4.jpg"); } .index-s3 .txt-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .index-s3 .box { width: 50%; margin-left: 50%; } .index-s3 .tit { color: #fff; } .index-s3 a { display: block; width: 15rem; margin-top: 7.5rem; line-height: 3.375rem; text-align: center; border: 2px solid #00a0e9; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .index-s3 a:hover { transform: translateY(-3px); background-color: #00a0e9; box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .index-s4 { position: relative; padding: 7.5rem 0 0; } .index-s4 .mouse { width: 7.5rem; height: 7.5rem; position: fixed; top: 0; left: 0; margin: -3.75rem 0 0 -3.75rem; will-change: transform; z-index: 5; pointer-events: none; } .index-s4 .mouse:after { content: ''; width: 100%; height: 100%; opacity: 0; visibility: hidden; display: block; background-position: center; background-repeat: no-repeat; background-size: contain; background-size: 99% auto; background-image: url("../images/index/icon-2.png"); transform: scale(0); } .index-s4 .mouse.active:after { opacity: 1; visibility: visible; transform: none; transition: transform .8s ease; } .index-s4 .top-box { text-align: center; } .index-s4 .top-box .tit { color: #00639d; } .index-s4 .top-box p { color: #42474e; font-weight: 300; letter-spacing: .75rem; margin-top: 1.5rem; } .index-s4 .block { margin-top: 5rem; position: relative; border-top: 1px solid transparent; z-index: 1; } .index-s4 .block:before { content: ''; width: 20%; height: calc(18.5vw + 11rem + 144px); display: block; margin: 0 auto; background-image: linear-gradient(180deg, #fff, #e5eff8); position: absolute; left: 0; right: 0; top: 0; border-radius: 0 0 12px 12px; z-index: 1; } .index-s4 .items { margin-top: -3.125vw; padding: 3.125vw 0; position: relative; z-index: 2; } .index-s4 .item { width: 20%; } .index-s4 .item .img-box { border-radius: 12px; overflow: hidden; } .index-s4 .item img { display: block; width: 100%; transition: transform .3s ease; } .index-s4 .item .txt-box { display: none; } @media screen and (min-width: 1020px) { .index-s4 .item:hover img { transform: scale(1.1); } } .index-s4 .info-box { position: relative; width: 20%; height: calc(18.5vw + 11rem + 144px); margin: -23vw auto 0; opacity: 0; transition: opacity .3s ease; z-index: 2; } .index-s4 .info-box a { display: block; padding-top: 18.5vw; cursor: none; } .index-s4 .info-box .box { padding: 2.5rem; } .index-s4 .info-box .tit { line-height: 2rem; font-weight: 300; color: #42474e; text-align: center; } .index-s4 .info-box p { line-height: 28px; font-weight: 300; height: 112px; color: #42474e; text-align: center; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; margin-top: 1.5rem; } .index-s4 .info-box i { display: block; width: 24px; height: 24px; margin: 2.5rem auto 0; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/index/icon-1.svg"); } .index-s4 .info-box.active { opacity: 1; } .index-s4 .button { width: 48px; height: 48px; position: absolute; bottom: 6.25vw; background-position: center; background-repeat: no-repeat; background-size: contain; z-index: 2; cursor: pointer; } .index-s4 .button-prev { left: 18vw; background-image: url("../images/index/left-1.svg"); } .index-s4 .button-next { right: 18vw; background-image: url("../images/index/right-1.svg"); } .index-s4 .pagination { font-size: 0; text-align: center; display: none; } .index-s4 .pagination span { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; border: 1px solid #00639d; margin: 0 2px; cursor: pointer; transition: all .3s ease; } .index-s4 .pagination span.active { background-color: #00639d; border-color: #00639d; } .index-s5 { height: 350vh; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-5.jpg"); } .index-s5 .icon { height: 100vh; position: sticky; top: 0; overflow: hidden; z-index: 2; } .index-s5 .icon .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: center; } .index-s5 .icon .line { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .index-s5 .icon .line.line-1:before, .index-s5 .icon .line.line-1:after { content: ''; position: absolute; left: 0; width: 100%; height: calc(50vh - 30rem); background-color: #fff; } .index-s5 .icon .line.line-1:before { top: 0; } .index-s5 .icon .line.line-1:after { bottom: 0; } .index-s5 .icon .line.line-2:before, .index-s5 .icon .line.line-2:after { content: ''; position: absolute; top: 0; height: 100%; width: calc(50vw - 50rem); background-color: #fff; } .index-s5 .icon .line.line-2:before { left: 0; } .index-s5 .icon .line.line-2:after { right: 0; } .index-s5 .icon .img-box { position: absolute; top: 50%; left: 50%; width: 120rem; transform: translate(-50%, -50%); z-index: 2; } .index-s5 .icon img { display: block; width: 100%; } .index-s5 .txt-box { position: sticky; top: 0; height: 100vh; margin-top: -100vh; z-index: 3; } .index-s5 .txt-box .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; } .index-s5 .cell-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .index-s5 .tit { text-align: center; } .index-s5 .para { color: #42474e; font-weight: 300; text-align: center; margin-top: 1.5rem; } .index-s5 .show { padding-top: 40rem; } .index-s5 .show .tit { color: #00639d; } .index-s5 .show .para { color: #42474e; } .index-s5 .show a.more { display: block; width: 15rem; margin: 3.75rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .index-s5 .show a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .index-s5 .hide { opacity: 0; visibility: hidden; transform: translateY(100px); padding-top: 20rem; } .index-s5 .hide .tit { color: #00a0e9; } .index-s5 .hide .para { color: #fff; } .index-s5 .hide a.more { display: block; width: 15rem; margin: 3.75rem auto 0; line-height: 3.375rem; text-align: center; border: 2px solid #00a0e9; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .index-s5 .hide a.more:hover { transform: translateY(-3px); background-color: #00a0e9; box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .index-s6 { padding: 11.25rem 3.75rem; } .index-s6 .top-box { text-align: center; } .index-s6 .top-box .tit { color: #00639d; } .index-s6 .top-box p { color: #42474e; font-weight: 300; letter-spacing: .75rem; margin-top: 1.5rem; } .index-s6 .items { margin-top: 3.75rem; font-size: 0; } .index-s6 .item { display: inline-block; vertical-align: top; width: calc((100% - 6rem) / 3); margin-left: 3rem; } .index-s6 .item .img-box { border-radius: 12px; overflow: hidden; } .index-s6 .item img { display: block; width: 100%; height: 16.5vw; object-fit: cover; transition: transform .5s ease; } .index-s6 .item .txt-box { position: relative; padding: 3.75rem; } .index-s6 .item .txt-box:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-image: linear-gradient(180deg, #fff, #e5eff8); border-radius: 0 0 12px 12px; z-index: 1; opacity: 0; transition: opacity .3s ease; } .index-s6 .item span { display: block; line-height: 1.6; font-weight: 300; color: #42474e; position: relative; z-index: 2; } @media screen and (min-width: 769px) { .index-s6 .item:nth-of-type(1) { margin-left: 0; } .index-s6 .item:nth-of-type(1), .index-s6 .item:nth-of-type(3) { transform: translateY(3.75rem); } } @media (any-hover: hover) { .index-s6 .item:hover img { transform: scale(1.1); } .index-s6 .item:hover .txt-box:before { opacity: 1; } } .index-s6 a.more { display: block; width: 15rem; margin: 3.75rem auto 0; line-height: 3.375rem; text-align: center; background-color: #00639d; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .index-s6 a.more:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .index-s7 { height: 100vh; position: relative; background-position: center; background-repeat: no-repeat; background-size: cover; background-image: url("../images/index/img-1.jpg"); } .index-s7 .txt-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .index-s7 .tit { color: #fff; } .index-s7 .para { width: 48.75rem; font-weight: 300; color: #fff; letter-spacing: .75rem; margin-top: 1.5rem; } .index-s7 a { display: block; width: 15rem; margin-top: 7.5rem; line-height: 3.375rem; text-align: center; border: 2px solid #00a0e9; border-radius: 5px; font-weight: 300; color: #fff; transition: all .3s ease; } @media (any-hover: hover) { .index-s7 a:hover { transform: translateY(-3px); background-color: #00a0e9; box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } } .index-s8 { padding-bottom: 11.25rem; } .index-s8 .top-box { text-align: center; } .index-s8 .top-box .tit { color: #00639d; } .index-s8 .top-box p { color: #42474e; font-weight: 300; letter-spacing: .75rem; margin-top: 1.5rem; } .index-s8 .cont-box { margin-top: 2.5rem; display: flex; align-items: center; } .index-s8 .img-box { width: 45%; position: relative; } .index-s8 .img-box .img { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; visibility: hidden; transition: all .3s ease; } .index-s8 .img-box .img:nth-of-type(1) { position: relative; } .index-s8 .img-box .img.active { opacity: 1; visibility: visible; } .index-s8 .img-box img { display: block; width: 100%; } .index-s8 .txt-box { width: 55%; } .index-s8 .tit { color: #42474e; } .index-s8 .btn { margin-top: 5.625rem; font-size: 0; } .index-s8 .btn a { display: inline-block; vertical-align: middle; width: calc((100% - 2.5rem) / 3); max-width: 15rem; text-align: center; color: #00639d; border: 1px solid #00639d; line-height: 3.375rem; border-radius: 5px; font-weight: 300; margin-left: 1.25rem; transition: all .3s ease; } .index-s8 .btn a:nth-of-type(1) { margin-left: 0; } .index-s8 .btn a.active { background-color: #00639d; color: #fff; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0, 160, 233, 0.3); } /* 2023-08-08 */ .product-s1 { padding: 7.5rem 0; } .product-s1 .items { display: flex; flex-wrap: wrap; margin-right: -3.75rem; } .product-s1 .item { width: calc(50% - 3.75rem); margin: 3.75rem 3.75rem 0 0; } .product-s1 .item a { display: block; position: relative; } .product-s1 .item .img-box { border: 1px solid #e5e5e5; border-radius: 1.875rem; overflow: hidden; transition: all .3s ease; } .product-s1 .item img { display: block; width: 100%; transition: transform .5s ease; } .product-s1 .item .tit { position: absolute; top: 3.75rem; left: 0; right: 0; text-align: center; font-size: 1.875rem; font-family: 'Krub-Medium'; } .product-s1 .item .more { position: absolute; bottom: 3.125rem; left: 0; right: 0; text-align: center; font-size: max(14px, 1.125rem); color: #00639d; } .product-s1 .item .more:after { content: ''; width: max(16px, 1.5rem); height: max(16px, 1.5rem); display: inline-block; vertical-align: middle; margin: -2px 0 0 .625rem; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url("../images/product/n-icon-1.png"); transition: all .3s ease; } @media screen and (min-width: 769px) { .product-s1 .item:nth-of-type(1), .product-s1 .item:nth-of-type(2) { margin-top: 0; } } @media (any-hover: hover) { .product-s1 .item:hover .img-box { border-color: #00639d; } .product-s1 .item:hover img { transform: scale(1.05); } .product-s1 .item:hover .more:after { transform: rotate(90deg); } } @media screen and (max-width: 1800px) { .career-s4 .swiper { padding: 0 10vw; } .responsibility-s12 .swiper { padding: 0 10vw; } .about-s8 .swiper { padding: 0 10vw; } .responsibility-s6 .swiper { padding: 0 10vw; } .about-s7 .swiper { padding: 0 16vw; } .investor-s3 .next { right: -7.5rem; } .investor-s3 .prev { left: -7.5rem; } .investor-s8 .para { height: 202px; } } @media screen and (max-width: 1681px) { .c-subnav a { margin-right: 2.5rem; } .investor-s8 .para { height: 195px; } .index-s4 .info-box p { line-height: 24px; height: 96px; } } @media screen and (max-width: 1441px) { .c-subnav a { margin-right: 1.5rem; } .investor-s8 .para { height: 172px; } } @media screen and (max-width: 1367px) { .about-s7 .item.pic .txt-box { width: 60%; margin-left: 40%; } .career-s2 .filter .year-box { width: 20rem; } .career-s2 .filter .form { width: calc(100% - 21.5rem); } .career-s5 .item a { width: 9rem; } .contact-s2 .info { height: 15rem; } .portfolio-s2 .table .box .cate span { font-size: 12px; } } @media screen and (max-width: 1281px) { .responsibility-s9 .item .para { line-height: 1.2; } .responsibility-s7 .item p { line-height: 1.2; } .about-s7 .item .para { -webkit-line-clamp: 4; } .portfolio-s2 .table .box .cate span { font-size: 12px; } .portfolio-s2 .table .box .cate span i { font-size: 12px; } } @media screen and (max-width: 1025px) { .wrap-s { width: 90%; } .investor-s8 .para { height: 152px; } .c-bg-fixed, .responsibility-s3, .investor-s1, .investor-s2, .investor-s8, .index-s3, .index-s5, .index-s7 { background-attachment: inherit; } .c-crumbs { display: none; } .c-banner { margin-top: 0; } .c-banner img { height: 60vw; object-fit: cover; } .c-banner .tit { width: 100%; font-size: 3rem; } .c-subnav { white-space: nowrap; } .c-subnav a { width: auto; margin-right: 0; padding: 0 10px; } .about-s10 .r-box { display: none; } .about-s10 .year-box { display: none; } .about-s6 .tab-tit .box { justify-content: center; } .about-s6 .tab-cont .year span { font-size: 26rem; } .about-s6 .tab-cont .child { padding-bottom: 7rem; } .about-s6 .tab-cont .text { height: 12rem; } .about-s7 .swiper { padding: 0; margin: 2rem 5vw 0; } .about-s7 .item { padding: 0; } .about-s7 .item.pic .txt-box { width: 70%; margin-left: 30%; } .about-s8 .swiper, .career-s4 .swiper, .responsibility-s6 .swiper, .responsibility-s12 .swiper { padding: 0 5vw; } .career-s6 .share { display: none; } .contact-s2 .info { display: none; } .investor-s3 .button { display: none; } .investor-s3 .pagination { margin-top: 2rem; text-align: center; font-size: 0; } .investor-s3 .pagination span { width: 6px; height: 6px; border-radius: 50%; display: inline-block; vertical-align: top; background-color: #e6e6e6; margin-left: 5px; } .investor-s3 .pagination span:nth-of-type(1) { margin-left: 0; } .investor-s3 .pagination span.active { background-color: #00639d; } .media-s2 .share { display: none; } .media-s2 .para { margin: 2rem 0; } .other-s3 .item .link a { min-width: auto; } .responsibility-s15 .item .btns a { width: 9rem; } .index-s1 .item { height: 70vw; } .index-s1 { margin-top: 60px; } .index-s1 .button { display: none; } .index-s1 .item span { width: 100%; font-size: 2.4rem; } .index-s1 .item p { margin-top: 1rem; width: 100%; } .index-s1 .item .tip { width: 100%; font-size: 2.4rem; } .index-s1 .item a { margin-top: 2rem; width: 12rem; } .index-s1 .pagination { bottom: 1rem; transform-origin: bottom center; transform: scale(0.6); } .index-s3, .index-s7 { height: 60vh; } .index-s4 { padding: 7.5rem 5%; } .index-s4 .items { margin-top: 0; padding: 0; } .index-s4 .block { margin-top: 2rem; } .index-s4 .block:before { display: none; } .index-s4 .button { display: none; } .index-s4 .pagination { display: block; } .index-s4 .info-box { width: 100%; margin-top: 0; height: auto; } .index-s4 .info-box a { padding-top: 0; } .index-s4 .info-box p { height: auto; } .index-s5 { height: auto; } .index-s5 .icon { display: none; } .index-s5 .txt-box { position: relative; margin-top: 0; height: auto; } .index-s5 .show { display: none; } .index-s5 .hide { position: static; opacity: 1; transform: none; visibility: visible; padding: 7.5rem 0; background-color: rgba(0, 0, 0, 0.5); } .index-s6 .item img { height: 16vw; } .search-s1 .item:before, .search-s1 .item:after { height: 4px; } .search-s1 .ani { display: none; } .search-s1 .item i { width: 14px; height: 14px; } } @media screen and (max-width: 769px) { .search-s1 { padding: 4rem 0; } .search-s1 .link { text-align: left; } .search-s1 .link a { margin: 0 1rem 1rem 0; } .about-s4 { padding: 4rem 0; } .about-s4 .block { margin: 4rem 0; } .about-s4 .center-box { display: none; } .about-s4 .items { display: block; } .about-s4 .item { display: block; width: 100%; height: auto; padding: 2rem; margin-top: 2rem; } .about-s4 .item:nth-of-type(1) { margin-top: 0; } .about-s4 .item:before, .about-s4 .item .b-icon { display: none; } .about-s4 .item .icon { position: static; width: 4rem; height: 4rem; } .about-s4 .item .tit { position: static; width: 100%; margin-top: 2rem; } .about-s4 .item i { position: static; display: block; } .about-s4 .item i.hide { display: none; } .about-s10 { padding: 4rem 0; } .about-s10 .line { left: 5px; margin-left: 0; top: 5px; height: calc(100% - 5px); } .about-s10 .icon { display: none; } .about-s10 .items { padding: 0; } .about-s10 .item { width: 100%; margin-top: 4rem; padding-left: 4rem; min-height: auto; } .about-s10 .item span:before { left: -4rem; margin-top: -7px; } .about-s10 .item .img-box { width: 100%; max-width: 30rem; } .about-s3 { padding: 4rem 0; } .about-s3 .item .tit { height: auto; padding: 1.5rem 0; } .about-s3 .item .hide { margin-top: 0; padding: 0 0 2rem; } .about-s3 .item .tit:after { width: 2rem; height: 2rem; right: 0; margin-top: -1rem; } .about-s3 .item .tit span { font-size: 1.6rem !important; } .about-s3 .item .img-box { width: 12rem; float: left; margin-right: 1.5rem; } .about-s3 .item.pic .para { width: 100%; padding-left: 0; display: block; } .about-s2 { padding: 4rem 0; } .about-s2 .item { width: calc(50% - .75rem); margin: 0 1.5rem 0 0; } .about-s2 .item:nth-of-type(even) { margin-right: 0; } .about-s2 .item .img-box { height: 35rem; } .team-pop .img-box { display: none; } .team-pop .txt-box { width: 100%; padding-left: 0; } .team-pop .para { max-height: 70vh; } .about-s1 { padding: 4rem 0; } .about-s1 .item { margin-top: 4rem; } .about-s5 { padding: 4rem 0; } .about-s5 .items { display: block; margin-top: 2rem; } .about-s5 .item { width: 100%; margin: 2rem 0 0; padding: 4rem; } .about-s5 .item:nth-of-type(1) { margin-top: 0; } .about-s6 { padding: 0; } .about-s6 .tab-cont .year span { font-size: 12rem; } .about-s6 .tab-cont .child { padding-bottom: 10rem; } .about-s6 .tab-tit .box { justify-content: inherit; } .about-s7 { padding: 4rem 0; } .about-s7 .item .box { border-radius: 10px; } .about-s7 .item.pic .img-box { display: none; } .about-s7 .item.pic .txt-box { width: 100%; margin-left: 0; } .about-s7 .item .txt-box { padding: 2rem; } .about-s7 .item { opacity: 1; } .about-s7 .item a { left: 2rem; bottom: 2rem; } .about-s8 { padding: 0; } .about-s8 .items, .career-s4 .items, .responsibility-s6 .items, .responsibility-s12 .items { margin: 2rem 5% 0; } .about-s8 .swiper, .career-s4 .swiper, .responsibility-s6 .swiper, .responsibility-s12 .swiper { padding: 0; } .about-s8 .swiper-control, .career-s4 .swiper-control, .responsibility-s6 .swiper-control, .responsibility-s12 .swiper-control { width: 80%; max-width: 30rem; } .about-s9 { padding: 4rem 0; } .about-s9 .flex { display: block; } .about-s9 .flex .img-box { width: 100%; } .about-s9 .flex .txt-box { width: 100%; padding-left: 0; } .about-s9 .flex a:nth-of-type(1) { border: none; } .career-s1 { padding: 4rem 0; } .career-s1 .item { margin-top: 1rem; height: auto; } .career-s1 .item:nth-of-type(1) { margin-top: 0; } .career-s1 .item:nth-of-type(4) { height: 40vw; } .career-s2 { padding: 4rem 0; } .career-s2 .filter { margin-top: 2rem; padding: 0; } .career-s2 .filter .year-box { width: 100%; margin: 0 0 10px 0; } .career-s2 .filter .form { width: 100%; } .career-s2 .filter .form input { font-size: 13px; } .career-s3 { padding: 0 0 4rem; } .career-s3 .box { display: block; } .career-s3 .item { width: 100%; height: auto; margin: 2rem 0 0; } .career-s3 .item:nth-of-type(1) { margin-top: 0; } .career-s3 .item a { padding: 2rem; } .career-s3 .item span { margin-top: 0; } .career-s3 .item p { opacity: 1; color: #42474e; } .career-s3 .item a:after { width: 2rem; height: 2rem; background-image: url("../images/career/icon-2-1.png"); } .career-s4 { padding: 0 0 4rem; } .career-s5 { padding-bottom: 4rem; } .career-s5 .item .box { padding: 2rem 0; } .career-s5 .item .opa { display: block; opacity: 1; } .career-s5 .item a { position: static; display: block; margin-top: 1rem; } .comm-page li { margin: 0; } .career-s6 { padding: 4rem 0; } .career-s6 .info { padding: 2rem 0; } .career-s7 { padding: 4rem 0; } .career-s7 .items { margin-top: 2rem; display: block; } .career-s7 .item { margin: 2rem 0 0; height: auto; } .career-s7 .item .show { position: relative; } .career-s7 .item .hide { position: absolute; top: 0; left: 0; } .career-s7 .item .tit { max-width: calc(100% - 2rem); } .career-s7 .item .show:after { bottom: 2rem; } .career-s8 { padding: 0 0 4rem; } .career-s8 .item .tit { padding: 2rem 5rem 2rem 2rem; } .career-s8 .item .tit:after { right: 2rem; } .career-s8 .item .para { margin-top: 0; padding: 0 2rem 2rem; } .career-s8 .item:before { top: 5px; bottom: 5px; } .contact-s1 { padding: 4rem 0; } .contact-s1 .tab-tit span { font-size: 14px; width: auto; margin-left: 10px; } .contact-s1 .tab-tit span:nth-of-type(1) { margin-left: 0; } .contact-s1 .tab-cont { margin-top: 2rem; } .contact-s1 .tab-cont .img-box { width: 100%; } .contact-s1 .tab-cont .txt-box { width: 100%; padding-left: 0; margin-top: 2rem; } .contact-s3 { padding: 4rem 0; } .contact-s3 .form { width: 100%; } .investor-s5 { padding: 4rem 0; } .investor-s1.style-2 { padding: 4rem 0; } .investor-s1 .items { flex-wrap: wrap; } .investor-s1 .item { width: 50%; margin-top: 4rem; } .investor-s1 .item:nth-of-type(1), .investor-s1 .item:nth-of-type(2) { margin-top: 0; } .investor-s1 .item .num { margin-top: 1rem; } .investor-s6 { padding: 4rem 0; } .investor-s6 .item a { padding: 2rem 0; display: block; } .investor-s6 .item .date span, .investor-s6 .item .date i { display: inline-block; } .investor-s6 .item .txt-box { width: 100%; margin-top: 1rem; } .investor-s7 { padding: 4rem 0; } .investor-s7 .item { padding: 4rem 0; } .investor-s7 .item:nth-of-type(1) { padding-top: 0; } .investor-s7 .item .img-box { width: 100%; } .investor-s7 .item .txt-box { width: 100%; position: static; transform: none; padding-top: 1rem; } .investor-s7 .item .tit { text-align: center; } .investor-s7 .item .btns { text-align: center; margin-top: 2rem; } .investor-s1.style-1 { padding: 4rem 0; } .investor-s1.style-1 .items { margin-top: 2rem; } .investor-s1 a.more { margin-top: 2.5rem; } .investor-s2 { padding: 4rem 0; } .investor-s2 .cont { display: block; } .investor-s2 .box { width: 100%; } .investor-s2 .link { width: 100%; margin-left: 0; } .investor-s2 .link a:nth-of-type(1) { border-top: none; } .investor-s2 .n-box { width: 100%; height: 20rem; margin-left: 0; margin-top: 2rem; } .investor-s2 .n-box-1 { width: 100%; margin-left: 0; margin-top: 2rem; } .investor-s3 { padding: 4rem 0; } .investor-s4 { padding: 0 0 4rem; } .investor-s4 .item { padding: 0; } .investor-s4 .item span { font-size: 14px; padding: 0 5px; } .investor-s8 { padding: 4rem 0; } .investor-s9 { padding-bottom: 4rem; } .investor-s10 { padding: 4rem 0; } .investor-s10 table td a { margin-left: 0; } .investor-s11 { padding: 4rem 0; } .investor-s11 .items { display: block; } .investor-s11 .item:nth-of-type(2) { margin: 10px 0 0; } .investor-s11 .item .info { padding: 2rem; } .investor-s12 { padding: 4rem 0; } .investor-s12 .item { width: 100%; } .investor-s12 .item:nth-of-type(2) { margin: 2rem 0 0; } .other-s2 { padding: 4rem 0; } .other-s2 .block .tit span { padding: 0 0 1rem; max-width: calc(100% - 30px); } .other-s2 .block .tit:after { right: 0; top: 2px; } .other-s2 .block .para { padding: 0; } .other-s2 .block { margin-top: 4rem; } .media-s1 { padding: 4rem 0; } .media-s1 .filter { padding: 0; } .media-s1 .filter .year-box { width: 100%; margin: 10px 0 0 0; } .media-s1 .filter .form { width: 100%; } .media-s1 .filter .form input { font-size: 13px; } .media-s1 .items { margin: 2rem 0 4rem; display: block; } .media-s1 .item { width: 100%; } .media-s1 .item:nth-of-type(1) a { padding-top: 0; } .media-s1 .item a { padding: 2rem 0; } .media-s2 { padding: 4rem 0; } .media-s2 .bot-block { margin-top: 4rem; } .media-s2 .bot-block .items { display: block; } .media-s2 .bot-block .item { width: 100%; margin: 4rem 0 0; } .media-s2 .bot-block .item:nth-of-type(1) { margin-top: 0; } .media-s2 .bot-block .item .txt-box { padding: 2rem 0 0; } .media-s3 { padding: 2rem 0; } .media-s3 a { margin-left: 1rem; padding: 2rem 0 1rem; } .media-s3 a i { width: 3rem; height: 3rem; } .media-s3 a span { font-size: 12px; } .media-s3 a:after { height: 2px; } .media-s4 { padding: 4rem 0; } .media-s4 .flex { display: block; } .media-s4 .img-box { width: 100%; } .media-s4 .txt-box { width: 100%; padding: 4rem 0; } .media-s4 .txt-box a { margin-top: 2.5rem; } .media-s4 .para, .media-s5 .para, .media-s6 .para, .media-s7 .para { padding: 2rem 0 0; } .media-s5 { padding: 4rem 0; } .media-s5 .items { display: block; } .media-s5 .item { width: 100%; margin: 2rem 0 0; height: auto; } .media-s5 .item:nth-of-type(1) { margin-top: 0; } .media-s5 .item .show { position: static; padding: 6rem 0; } .media-s5 .item .hide { position: static; opacity: 1; padding: 2rem; } .media-s6 { padding: 4rem 0; } .media-s6 .items { display: block; } .media-s6 .item { width: 100%; margin: 2rem 0 0; } .media-s6 .item:nth-of-type(1) { margin-top: 0; } .media-s7 { padding: 4rem 0; } .media-s7 .items { display: block; } .media-s7 .item { width: 100%; margin: 2rem 0 0; } .media-s7 .item:nth-of-type(1) { margin-top: 0; } .other-s1 { padding: 4rem 0; } .other-s1 .top-list { padding: 0 2rem; margin-top: 2rem; } .other-s1 .block { margin-top: 4rem; padding-top: 4rem; } .other-s1 .block .para { margin-top: 2rem; padding: 0; } .other-s3 { padding: 4rem 0; } .other-s3 .item { margin-top: 4rem; } .other-s3 .item .link { margin-right: -5px; } .other-s3 .item .link a { margin: 5px 5px 0 0; padding: 0 30px 0 20px; } .other-s3 .item .link a:after { right: 1rem; } .portfolio-s1 { padding: 4rem 0; } .portfolio-s1 .img-box { width: 100%; max-width: 26rem; } .portfolio-s1 .items { margin-top: 4rem; } .portfolio-s2 { padding: 4rem 0; } .portfolio-s2 .cont { margin-top: 2rem; overflow-x: auto; padding-bottom: 10px; } .portfolio-s2 .table { min-width: 900px; } .portfolio-s2 .table .box .cate span { font-size: 12px; } .portfolio-s3 { padding: 0 0 4rem; } .portfolio-s3 .item .tit span { font-size: 1.8rem; } .portfolio-s3 .item .tit span { transform: scale(0.9); } .portfolio-s4 { padding: 4rem 0; } .portfolio-s4 .item { margin-top: 4rem; } .portfolio-s4 .table { min-width: 600px; } .portfolio-s4 .table .top-box span { padding: 1rem; } .portfolio-s4 .table .bot-box .cell-box { padding: 1rem; } .portfolio-s4 .cont { overflow-x: auto; padding-bottom: 10px; } .portfolio-s5 { padding-top: 4rem; } .portfolio-s5 .bot-para { padding: 0 2rem 2rem; } .portfolio-s6 { padding: 4rem 0; } .portfolio-s6 .tip { margin-top: 2rem; padding: 0; } .portfolio-s6 .item { padding-bottom: 4rem; margin-bottom: 4rem; display: block; } .portfolio-s6 .item .img-box { width: 100%; } .portfolio-s6 .item .txt-box { width: 100%; padding-left: 0; margin-top: 2rem; } .portfolio-s7 { padding: 4rem 0; } .portfolio-s7 .flex { display: block; } .portfolio-s7 .img-box { width: 100%; } .portfolio-s7 .txt-box { width: 100%; padding-left: 0; margin-top: 2rem; } .responsibility-s1 { padding: 4rem 0; } .responsibility-s1 .items { margin-top: 2rem; } .responsibility-s1 .item { margin-top: 2rem; display: block; } .responsibility-s1 .item .img-box { width: 100%; } .responsibility-s1 .item .txt-box { width: 100%; margin-top: 2rem; } .responsibility-s2 { padding: 0 0 4rem; } .responsibility-s2 .items { margin-top: 2rem; display: block; } .responsibility-s2 .item { padding: 2rem; } .responsibility-s2 .item:nth-of-type(2) { margin: 2rem 0 0; } .responsibility-s2 .item i { width: 5rem; height: 5rem; } .responsibility-s2 .item .tit { margin-top: 0; } .responsibility-s2 .item:after { margin-top: 2rem; } .text-modal .main { padding: 2.5rem 2rem; } .text-modal .tit { padding-right: 4rem; } .responsibility-s3 { padding: 4rem 0; } .responsibility-s4 { padding: 4rem 0; } .responsibility-s4 .flex { display: block; } .responsibility-s4 .flex .img-box { width: 100%; } .responsibility-s4 .flex .txt-box { width: 100%; padding: 0; } .responsibility-s4 .flex a:nth-of-type(1) { border-top: none; } .responsibility-s5 { padding: 4rem 0; } .responsibility-s5 .txt-box { margin-top: 2rem; padding: 0; } .responsibility-s5 .txt-box:after { display: none; } .responsibility-s5 .box { padding: 0; width: 100%; } .responsibility-s6 { padding: 0 0 4rem; } .responsibility-s6.pt { padding-top: 4rem; } .responsibility-s7 { padding: 0 0 4rem; } .responsibility-s7.pt { padding-top: 4rem; } .responsibility-s7 .items { display: block; } .responsibility-s7 .item { height: auto; padding: 2rem; margin: 2rem 0 0; } .responsibility-s7 .item i { width: 5rem; height: 5rem; } .responsibility-s7 .item .tit { margin-top: 0; } .responsibility-s7 .item:after { display: block; position: static; margin-top: 1rem; } .responsibility-s7 .item.flip .show { position: relative; padding: 2rem; } .responsibility-s7 .item.flip .show:after { display: none; } .responsibility-s7 .item.flip .show p { display: block; line-height: 1.6; } .responsibility-s7 .item.flip .hide { display: none; } .responsibility-s7 .para.mt { margin-top: 2rem; } .responsibility-s8 { padding: 4rem 0; } .responsibility-s8 .tit { background-size: 8rem auto; } .responsibility-s9 { padding: 4rem 0; } .responsibility-s9 .items { display: block; } .responsibility-s9 .item { height: auto; margin: 2rem 0 0; } .responsibility-s9 .item .show { position: relative; } .responsibility-s9 .item .hide { position: absolute; top: 0; left: 0; } .responsibility-s9 .item .tit { max-width: calc(100% - 2rem); } .responsibility-s9 .item .show:after { bottom: 2rem; } .responsibility-s10 { padding: 4rem 0; } .responsibility-s10 .items { display: block; } .responsibility-s10 .item { padding: 2rem; } .responsibility-s10 .item:nth-of-type(2) { margin: 2rem 0 0; } .responsibility-s10 .item i { width: 5rem; height: 5rem; } .responsibility-s10 .item:after { margin-top: 2rem; } .responsibility-s11 .flex { display: block; } .responsibility-s11 .flex .img-box { width: 100%; } .responsibility-s11 .flex .txt-box { width: 100%; margin: 0; } .responsibility-s12 { padding: 4rem 0; } .responsibility-s13 { padding-bottom: 4rem; } .responsibility-s13 .center-box { display: none; } .responsibility-s13 .items { display: block; } .responsibility-s13 .item { display: block; width: 100%; height: auto; padding: 2rem; margin-top: 2rem; border-radius: 10px; } .responsibility-s13 .item:nth-of-type(1) { margin-top: 0; } .responsibility-s13 .item span { position: static; padding: 0; } .responsibility-s13 .item .tit { position: static; padding: 0; margin-top: 1rem; } .responsibility-s14 { padding: 4rem 0; } .responsibility-s14 .flex { display: block; } .responsibility-s14 .flex .img-box { width: 100%; } .responsibility-s14 .flex .txt-box { width: 100%; padding-left: 0; margin-top: 2rem; } .responsibility-s15 { padding: 4rem 0; } .responsibility-s15 .single { display: block; } .responsibility-s15 .single .img-box { width: 100%; } .responsibility-s15 .single .txt-box { width: 100%; } .responsibility-s15 .single .tit { text-align: center; } .responsibility-s15 .single .btns { margin-top: 2rem; text-align: center; } .responsibility-s15 .items { margin-top: 4rem; } .responsibility-s15 .item { padding: 2rem 0; display: block; } .responsibility-s15 .item span { width: 100%; } .responsibility-s15 .item .btns { margin-top: 1rem; } .index-s2 { padding: 4rem 0; } .index-s2 .img-box { width: 160%; margin-left: -30%; } .index-s2 a.more { margin-top: 3.75rem; } .index-s2 .para { line-height: 1.5; } .index-s3 .box { width: 70%; margin-left: 30%; } .index-s3 { height: auto; padding: 8rem 0; } .index-s3 .txt-box { position: static; } .index-s3 a { margin-top: 3.75rem; } .index-s4 { padding: 4rem 5%; } .index-s6 { padding: 4rem 5%; } .index-s6 .items { margin-top: 2rem; } .index-s6 .item { width: 100%; margin: 4rem 0 0; } .index-s6 .item:nth-of-type(1) { margin-top: 0; } .index-s6 .item img { height: 50vw; } .index-s6 .item .txt-box { padding: 2rem 0 0; } .index-s7 .para { width: 100%; } .index-s8 { padding-bottom: 4rem; } .index-s8 .cont-box { display: block; } .index-s8 .img-box { width: 100%; } .index-s8 .txt-box { width: 100%; } .index-s8 .tit { text-align: center; } .index-s8 .btn { margin-top: 2rem; } .index-s8 .btn a { width: calc((100% - 10px) / 2); max-width: none; margin: 0 10px 10px 0; } .index-s8 .btn a:nth-of-type(even) { margin-right: 0; } .index-s7 { height: auto; padding: 6rem 0; } .index-s7 .txt-box { position: static; } .index-s7 a { margin-top: 3.75rem; } .product-s1 { padding: 4rem 0; } .product-s1 .items { display: block; margin-right: 0; } .product-s1 .item { width: 100%; margin-top: 2rem; } .product-s1 .item:nth-of-type(1) { margin-top: 0; } .product-s1 .item .tit { top: 2rem; } .product-s1 .item .more { bottom: 2rem; } .media-s1 .item img { height: 24vw; } .media-s2 .bot-block .item img { height: 50vw; } } @media screen and (max-width: 481px) { .search-s1 .form { width: 100%; } .about-s2 .item { width: 100%; margin: 2rem 0 0; } .about-s2 .item:nth-of-type(1) { margin-top: 0; } .about-s2 .item .img-box { height: 90vw; } .career-s5 .item .info span { display: block; margin-right: 0; } .career-s5 .item .info span:nth-of-type(2) { margin-top: 5px; } .career-s6 .info span { display: block; margin-right: 0; } .career-s6 .info span:nth-of-type(2) { margin-top: 5px; } .media-s1 .item a { display: block; padding: 4rem 0; } .media-s1 .item .img-box { width: 100%; } .media-s1 .item .txt-box { width: 100%; padding-left: 0; margin-top: 2rem; } .media-s1 .item img { height: 50vw; } } /*# sourceMappingURL=bundle.css.map */