@charset "utf-8"; * { position: relative; } img { max-width: 100%; } li { display: block; } * { -webkit-overflow-scrolling: touch; } a { color: inherit; text-decoration: none; } html { overflow-x: hidden; } body { line-height: 1; margin: 0; padding: 0; } .flex-box-v { display: -webkit-flex; display: flex; -webkit-flex-flow: column wrap; flex-flow: column wrap; -webkit-justify-content: center; justify-content: center; } @media only screen and (max-width: 768px){ #c_portalResNews_detail-15771560370487350 img { max-width: 100%; height: auto !important; margin-top: 20px; } } /*banner*/ .Banner-container { height: 100vh; min-height: 600px; max-height: 1600px; width: 100%; } .banner-background { background-size: cover; background-position: center; position: absolute; left: 0; right: 0; bottom: 0; top: 0; } .banner-slide { display: flex; flex-flow: column; justify-content: center; overflow: hidden; } .banner-text { margin: 0 auto; width: 90%; max-width: 1200px; transform: translate3d(0, 0, 0); will-change: transform; } .banner-text h1 { font-weight: bold; font-size: 5vw; color: #fff; } .banner-text h2 { margin-top: 1rem; color: #fff; font-size: 2.5rem; } .banner-bg-ss { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 1; background: rgba(0, 0, 0, 0.1); } .banner-text { z-index: 10; } .banner-text:before { content: ""; position: absolute; width: 300px; height: 428px; display: block; border: 10px solid rgba(182, 124, 67, 0.9); top: 4.5rem; margin-top: -200px; left: -6rem; } .banner-bg-ss:before { content: ""; position: absolute; left: 0; width: 22%; top: 35%; bottom: 20%; background-image: url(/img/banner_bg01a.png); display: block; background-size: cover; z-index: 2; opacity: 0.3; } .banner-bg-ss:after { content: ""; position: absolute; right: 4%; width: 18%; height: 29%; top: 15%; bottom: 20%; background-image: url(/img/banner_bg01a.png); display: block; background-size: cover; z-index: 2; opacity: 0.3; } .small-title { color: #ffffff; margin-bottom: 1.5rem; top: -17px; letter-spacing: 42px; font-size: 1.25rem; } /*.banner-warpper.swiper-wrapper { transition-timing-function: cubic-bezier(0.75, 0.22, 0.25, 1); } .banner-warpper.swiper-wrapper .banner-background { transition-timing-function: cubic-bezier(0.75, 0.22, 0.25, 1); will-change: transform; }*/ .banner-switch { position: absolute; z-index: 30; left: auto; top: 50%; height: 80px; right: 2rem; color: #fff; display: grid; margin-top: -25px; grid-template-columns: 1fr; width: auto; align-content: center; align-items: center; text-transform: uppercase; } .banner-switch > div > * { display: inline-block; vertical-align: middle; } .sL_icon { background-size: contain; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; } .banner-switch > div > span { margin: 0 0.5rem; font-size: 0.825rem; } .banner-switch > div { margin: 0.3rem 0; } .banner-switch > div { cursor: pointer; transition: 0.5s; } .swiper-button-disabled { opacity: 0.4; } .Scroll-tip { position: absolute; z-index: 5; bottom: 0; left: 0; right: 0; margin: auto; max-width: 100px; color: #fff; text-align: center; } .Tipss { text-transform: uppercase; font-size: 1.525rem; } .tip_anim { display: inline-block; margin: 0.75rem 0; height: 30px; } .Tipss span { display: block; line-height: 19px; font-size: 14px; } .tip_anim span { display: inline-block; width: 1px; height: 100%; background: #fff; animation-name: scrollTip; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: cubic-bezier(0.82, 0.24, 0.25, 1); } .Banner-A1 { z-index: 1; } @keyframes scrollTip { 0% { transform: scale(1, 0); transform-origin: top; } 49% { transform: scale(1, 1); transform-origin: top; } 51% { transform: scale(1, 1); transform-origin: bottom; } 100% { transform: scale(1, 0); transform-origin: bottom; } } .banner-background { transition: 1s 2.5s; transform: perspective(1000px) translate3d(0, 0, 100px); } .swiper-slide.banner-slide.swiper-slide-active .banner-background { transition: 5s 0s; transform: perspective(1000px) translate3d(0, 0, 0px); } .banner-text:before { transition-delay: 2s; transition-duration: 2s; transform: translate3d(-80px, 0, 0); opacity: 0; } .swiper-slide.banner-slide.swiper-slide-active .banner-text:before { transition-delay: 1.3s; transform: translate3d(0px, 0, 0); opacity: 1; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(1) { transition-delay: 0.5s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(2) { transition-delay: 0.7s; } .swiper-slide.banner-slide.swiper-slide-active .banner-text *:nth-child(3) { transition-delay: 0.9s; } .banner-text * { transition-delay: transform 2s, opacity 0s; transition-duration: 2s; transform: translate3d(0, 80px, 0); top: -68px; opacity: 0; } .swiper-slide.banner-slide.swiper-slide-active .banner-text * { transform: translate3d(0, 0px, 0); opacity: 1; } @media screen and (max-width: 1600px) { .banner-text { max-width: 1000px; width: 80%; } } @media screen and (max-width: 1200px) { .banner-text:before { content: ""; position: absolute; width: 300px; height: 400px; display: block; border: 10px solid rgba(182, 124, 67, 0.9); top: 4.5rem; margin-top: -200px; left: 50%; margin-left: -150px; } .banner-text { text-align: center; } .banner-text h2 { font-size: 1.5rem; } } @media screen and (max-width: 769px) { .banner-switch { top: auto; bottom: 2rem; left: 5%; right: 5%; justify-content: center; align-items: center; display: none; } .banner-text h1 { font-size: 8.15vw; } .banner-text h2 { font-size: 2rem; } .small-title { font-size: 0.925rem; padding-left: 8%; text-align: center; } .banner-text:before { opacity: 0; } .banner-text:before { content: ""; position: absolute; width: 250px; height: 400px; display: block; border: 10px solid rgba(182, 124, 67, 0.9); top: 4.5rem; margin-top: -200px; left: 50%; margin-left: -125px; } } /*banner*/ /*top*/ .Top { position: fixed; z-index: 500; top: 0; left: 0; right: 0; padding-top: 1.5rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 1.5rem; } .Top_logo img { display: block; max-width: 60px; } .Top_logo { margin-right: auto; } .Top_logo a { display: inline-block; } .Top_nav_btn { position: absolute; display: flex; flex-flow: column; justify-content: center; justify-items: center; right: 2rem; top: 1.5rem; bottom: 1.5rem; width: auto; } .nav_btn { width: 50px; height: 50px; background: rgba(0, 0, 0, 0.25); } .nav_btn > div { width: 100%; height: 100%; box-sizing: border-box; display: grid; grid-template-columns: 1fr; align-items: center; } .nav_btn { padding: 0.75rem 0.9rem; cursor: pointer; } .nav_btn span { display: block; width: 100%; height: 2px; background: #fff; } .Top_nav_btn { z-index: 20; } .Top_nav_slideMenu { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; background: rgba(0, 0, 0, 0.8); color: #fff; display: flex; flex-flow: column; justify-content: center; padding: 5rem 0; } .slideMenu { padding: 0 2rem; } .sL_item { padding: 1.5rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .Top_nav_slideMenu { transition: 0.8s; transform: perspective(1000px) translate3d(100%, 0, 0); will-change: transform; transition-timing-function: cubic-bezier(0.66, 0.18, 0.25, 1); } .Open .Top_nav_slideMenu { transition: 0.8s; transform: perspective(1000px) translate3d(00%, 0, 0); will-change: transform; transition-timing-function: cubic-bezier(0.66, 0.18, 0.25, 1); } .nav_btn span { transition: 0.8s; transform: translate3d(0, 0, 0); transform-origin: left; } .Open .nav_btn span:nth-child(2) { transform: translate3d(0, 0, 0) scale(0.75, 1); } .Open .nav_btn span:nth-child(3) { transform: translate3d(0, 0, 0) scale(0.5, 1); } @media screen and (max-width: 769px) { .Top_nav_slideMenu { width: 100%; } } /*top*/ /*S01*/ .S01 { padding: 5rem 0; } .ss_title { text-align: center; margin-bottom: 4rem; } .about_content { margin: auto; width: 90%; max-width: 1200px; display: grid; grid-template-columns: 1fr 1fr; } .ss_title h1 { font-weight: bold; font-size: 1.5rem; margin-bottom: 0.5rem; } .ss_title h1 span { color: #cf8b32; margin-right: 0.2rem; } .ss_title h4 { opacity: 0.4; } .ab_ctext { display: grid; grid-template-columns: 1fr 1fr; } .ab_imgC { height: 100%; background-size: cover; background-position: center; margin-left: 25px; } .ab_img_text { position: absolute; font-size: 0.825rem; z-index: 5; bottom: 0; transform-origin: bottom left; transform: rotate(-90deg); left: 0.5rem; } .ab_img_text span { display: inline-block; vertical-align: middle; width: 50px; height: 1px; background: #cf8b33; margin-right: 1rem; } .ab_img_text h4 { display: inline-block; vertical-align: middle; } .ab_cct01 { grid-column-start: 1; grid-column-end: 3; padding: 3rem 1rem; padding-top: 0; } .ab_ccList { padding: 1rem; } .ab_ctext { padding-left: 2.5rem; } .ab_cct01 h3 { font-size: 1.25rem; margin-bottom: 0.75rem; color: #cf8b32; } .ab_cct01 h2 { font-size: 1.5rem; } .ab_ccList i { display: inline-block; margin-bottom: 1rem; color: #cf8b32; } .ab_ccList h3 { margin-bottom: 1rem; } .ab_ccList p { font-size: 0.925rem; line-height: 1.5; opacity: 0.85; } .ab_ccList { color: #383838; } .ab_ctext { padding-bottom: 5rem; padding-top: 5rem; } .bg_text { position: absolute; font-size: 11vw; left: -0.25em; opacity: 0.05; line-height: 0.75; } @media screen and (max-width: 769px) { .about_content { grid-template-columns: 1fr; grid-template-rows: minmax(350px, 1fr); } .ab_img_text h4 { font-size: 0.75rem; opacity: 0.5; } .ab_ctext { padding-left: 0; grid-template-columns: repeat(1, minmax(100%, 1fr)); } .ab_cct01 { grid-column-end: 1; } .ab_ctext { padding-bottom: 0; } } /*S01*/ /*S02*/ .pj_imgC { height: auto; padding-bottom: 100%; background-size: cover; background-position: center; } .project_list { margin: 0 0.5rem; } .pj_titles { margin: 1rem 0; padding-right: 6rem; } .pj_titles h1 { font-size: 1.15rem; line-height: 1.2; margin-bottom: 0.25rem; } .pj_titles p { font-size: 0.875rem; margin-bottom: 1rem; opacity: 0.8; line-height: 1.5; } span.time { display: block; font-size: 0.825rem; opacity: 0.8; color: #cf8b32; position: absolute; right: 0; top: 0; line-height: 1.8; } .project_list > a { display: block; position: absolute; z-index: 10; left: 0; right: 0; top: 0; bottom: 0; } .S02 { padding: 5rem 0; } .project-container { margin: 0 -5%; } .project-slide.swiper-slide .project_list { transition: 0.8s; opacity: 0.15; } .project-slide.swiper-slide.swiper-slide-active .project_list, .project-slide.swiper-slide.swiper-slide-prev .project_list, .project-slide.swiper-slide.swiper-slide-next .project_list { opacity: 1; } .project-slide.swiper-slide .project_list .pj_titles { transition: 0.8s; opacity: 0; } .project-slide.swiper-slide.swiper-slide-active .project_list .pj_titles, .project-slide.swiper-slide.swiper-slide-prev .project_list .pj_titles, .project-slide.swiper-slide.swiper-slide-next .project_list .pj_titles { opacity: 1; } .pj-prev-btn { position: absolute; z-index: 20; left: 0; width: 20%; bottom: 0; top: 0; cursor: pointer; display: flex; flex-flow: column; justify-content: center; } .pj-prev-btn .btn { color: #000; text-align: center; position: absolute; bottom: 1.5rem; left: 0; right: 0; text-transform: uppercase; font-size: 0.825rem; } .pj-next-btn { position: absolute; z-index: 20; right: 0; width: 20%; bottom: 0; top: 0; cursor: pointer; display: flex; flex-flow: column; justify-content: center; } .pj-next-btn .btn { color: #000; text-align: center; position: absolute; bottom: 1.5rem; left: 0; right: 0; text-transform: uppercase; font-size: 0.825rem; } .pj-prev-btn .btn > * { display: inline-block; vertical-align: middle; margin: 0.5rem 0.5rem; } .pj-next-btn .btn > * { display: inline-block; vertical-align: middle; margin: 0.5rem 0.5rem; } @media screen and (max-width: 1100px) { .project-container { margin: 0 0.5%; } .pj-prev-btn .btn { display: none; } .pj-next-btn .btn { display: none; } .pj_titles { margin: 1rem 0; padding-right: 0; } } @media screen and (max-width: 769px) { .S02 { padding: 2rem 0; } .project-container { margin: 0 5%; } .pj-prev-btn { display: none; } .pj-next-btn { display: none; } } /*S02*/ .more_btn { margin: 4rem 0; text-align: center; } .mBtn { display: inline-block; } .mBtn a { display: inline-block; padding: 1rem 2rem; border: 2px solid #d39545; } /*S03*/ .S03 { padding: 10rem 0; background: #000; overflow: hidden; } .SBG { position: absolute; left: 0; right: 0; bottom: 0; top: 0; background-size: cover; background-position: center; opacity: 0.4; } .about_02 { color: #fff; } .ab-pic-list { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: auto; width: 90%; max-width: 720px; grid-gap: 15px; } .ab-pItem img { display: block; object-fit: cover; position: absolute; height: 100%; width: 100%; left: 0; top: 0; } .ab-pItem { padding-bottom: 100%; overflow: hidden; border-radius: 100%; } .ab-pItem a { display: block; height: 100%; position: absolute; width: 100%; left: 0; right: 0; } .ab02-2 { margin-bottom: 3rem; } .ab02-3 { text-align: center; margin: auto; max-width: 780px; margin-bottom: 4rem; } .ab02-3 { width: 90%; } .ab02-3 h1 { line-height: 1.5; margin-bottom: 1rem; font-size: 1.25rem; color: #ce8a32; } .ab02-3 p { line-height: 1.75; } .ab02-4 h1 { text-align: center; font-size: 1.5rem; color: #cd8a32; margin-bottom: 2rem; } .ab0corp { display: grid; grid-template-columns: repeat(auto-fit, minmax(10%, 1fr)); align-content: center; align-self: center; align-items: center; justify-content: center; justify-items: center; margin: auto; width: 90%; max-width: 1200px; grid-gap: 0.5rem; } .corpList a { display: block; width: 75%; margin: auto; } .corpList { padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.3); } @media screen and (max-width: 769px) { .ab0corp { grid-template-columns: repeat(auto-fit, minmax(30%, 1fr)); } } .pj_img { overflow: hidden; transform: perspective(1000px) translate3d(0, 0, 0px); transition: 0.5s; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0); } .pj_img > div { transition: 0.5s; transform: perspective(1000px) translate3d(0, 0, 80px); } .project_list:hover .pj_img { overflow: hidden; transform: perspective(1000px) translate3d(0, 0, 30px); transition: 0.5s; box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.2); } .project_list:hover .pj_img > div { transition: 0.5s; transform: perspective(1000px) translate3d(0, 0, 0px); } .pj_titles { transform: perspective(1000px) translate3d(0, 0, 0px); transition: 0.5s; } .project_list:hover .pj_titles { transform: perspective(1000px) translate3d(0, 10px, 0px); transition: 0.5s; } /*S03*/ /*S04*/ .S04 { padding: 5rem 0; } .news_warpper { display: grid; grid-template-columns: repeat(2, minmax(250px, 1fr)); grid-gap: 0rem; grid-column-gap: 3rem; } .news_item.first { grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-rows: 1fr 1fr; } .news_item:first-child { grid-row-start: 1; grid-row-end: 3; display: grid; grid-template-rows: 1fr 1fr; } .ns_img {} .ns_imgC { height: 100%; background-size: cover; background-position: center; max-height: 100%; } .news_content { margin: auto; width: 90%; max-width: 1200px; } .ns_titles { padding: 2rem 0; } .news_item { border-bottom: 1px solid rgba(0, 0, 0, 0.11); } .ns_titles h1 { font-size: 1.15rem; line-height: 1.5; margin-bottom: 1rem; } .ns_titles p { line-height: 1.5; opacity: 0.65; margin-bottom: 1rem; font-size: 0.875rem; } .ns_time { color: #ddae70; font-weight: bold; } a.ns_link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 30; } @media screen and (max-width: 769px) { .news_warpper { grid-template-columns: repeat(1, minmax(250px, 1fr)); } .news_item:first-child { grid-template-rows: minmax(100px, 200px); } .ns_titles p { max-height: 6em; overflow: hidden; text-overflow: ellipsis; } } /*S04*/ /*S05*/ .S05 { padding: 1rem 0; padding-top: 0rem; } .backTOP { text-align: center; margin-bottom: 5rem; } .backTOP > span { display: inline-block; height: 5rem; width: 2px; background: #cf8b32; margin-bottom: 1rem; } .BackTOPbtn { display: block; text-align: center; margin: auto; width: 150px; height: 150px; display: flex; justify-content: center; align-items: center; cursor: pointer; } .BackTOPbtn > span { display: block; width: 100%; border: 1px solid #e0b379; text-transform: uppercase; font-size: 0.825rem; padding: 1rem; transform: rotate(-90deg); color: #d39545; } .contact_mm { text-align: center; } .ftlogo { max-width: 60px; margin: auto; margin-bottom: 3rem; } .ft_code { margin: auto; max-width: 100px; } .footer_bottom { border-top: 1px solid rgba(0, 0, 0, 0.05); text-align: center; line-height: 1.5; font-size: 0.75rem; color: #909090; padding: 2rem 0; padding-bottom: 1rem; } /*S05*/ .w_grid-000 { position: static; } .c_portalResnav_main-01001 { position: static !important; }