/* main {background: #fff;} */ /* visual */ .mainVis {height: 970rem; min-height: 450rem; background: var(--black); color: #fff; } .mainVis .inr{ position: absolute; inset: var(--header-height) 0 10.8%; display: flex; align-items: center; z-index: 1; } .mainVis .swiper-slide {position: relative;} .mainVis .swiper-slide::before{ content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; z-index: -1; } .mainVis .s1::before{ background-image: url('/images/main/visual01.jpg'); } .mainVis .s2::before{ background-image: url('/images/main/visual02.jpg'); } .mainVis .s3::before{ background-image: url('/images/main/visual03.jpg'); } .mainVis .mVis_txt h2 {font-size:var(--fs55); font-weight: 500; margin: 35rem 0 30rem;} .mainVis .mVis_txt p {font-size:var(--fs18); line-height: 1.8; font-weight: 300; } .mainVis .mVis_pagination .swiper-pagination-bullet+.swiper-pagination-bullet{margin-left: 20rem;} .mainVis .swiper-pagination-bullet {width: 8rem; height: 8rem; border-radius: 0; background: #fff; opacity: .5;} .mainVis .swiper-pagination-bullet-active {transform: rotate(45deg); opacity: 1} @media (prefers-reduced-motion: no-preference){ .mainVis .swiper-pagination-bullet{ transition: .3s; } .mainVis .swiper-slide-active::before{ animation: slide_bg 3s both; } @keyframes slide_bg{ 0%{ transform: scale(1.05); } 100%{ transform: scale(1); } } .mVis_txt > *{ opacity: 0; animation: visual_txt .8s .3s both; } .mVis_txt > *:nth-child(2){ animation-delay: .6s; } .mVis_txt > *:nth-child(3){ animation-delay: .9s; } @keyframes visual_txt{ 0%{ transform: translateX(40rem); opacity: 0; } 100%{ transform: translateX(0); opacity: 1; } } } @media(max-width:767px){ .mainVis{ max-height: 100vh; } .mainVis .mVis_txt h2 {font-size: 40rem; line-height: 1.4; margin: 25rem 0 20rem;} } /* common */ .main_Tit {} .main__em {display: block; font-size: var(--fs18); font-weight: 500; color: var(--primary); margin-bottom: 20rem;} .main__h2 {font: 500 var(--fs40)/1.4 var(--font-kcg); letter-spacing: -.08em;} .main__h2 strong {display: block;font-weight: 500 } .main__p {color: #444; font-size: 17rem; line-height: 1.7;} @media(max-width:767px){ .main__em {margin-bottom: 18rem;} .main__h2 {font-size: 30rem;} .main__p {line-height: 1.5;} } /* mainAbout */ .mainAbout {text-align: center;} .mainAbout .about_top {padding: 130rem 0;} .mainAbout .main_Tit .main__h2 { margin-bottom: 35rem;} .mainAbout .about_more {display: inline-block; font-size: 15rem; color: #777; margin-top: 40rem; padding: 18rem 65rem; box-sizing: border-box; border: 2rem solid #eaeaea; border-radius: 35rem; } .mainAbout .about_more:hover {border-color: var(--primary); color: var(--primary); font-weight: 500;} .mainAbout .about_list {position: relative; display: grid; grid-template-columns: repeat(4,1fr); max-width: 1400rem; margin: 0 auto; background: #231c19; color: var(--white)} .mainAbout .about_list::before {content: ''; position: absolute; height: auto; inset: 0 -50vw; background: #231c19; z-index: -5;} .mainAbout .about_list li {position: relative; padding: 50rem 0; cursor: pointer; z-index: 10;} .mainAbout .about_list h4 {font-size: var(--fs20); font-weight: 500; margin-bottom: 20rem;} .mainAbout .about_list span {font-size: 15rem; font-weight: 300; color: rgba(255, 255, 255, 0.4);} .mainAbout .about_list li .hover {position: absolute; bottom: 0; width: 100%; height: 0; padding: 50rem 0; box-sizing: border-box; visibility: hidden; display: none; z-index: 10;} .mainAbout .about_list li .hover::before {content: ''; position: absolute; bottom: 0; left: 0; background-size: cover; width: 100%; height: 100%; background-repeat: no-repeat; z-index: -1;} .mainAbout .about_list li:nth-child(1) .hover::before {background-image: url(/images/main/about1.jpg);} .mainAbout .about_list li:nth-child(2) .hover::before {background-image: url(/images/main/about2.jpg);} .mainAbout .about_list li:nth-child(3) .hover::before {background-image: url(/images/main/about3.jpg);} .mainAbout .about_list li:nth-child(4) .hover::before {background-image: url(/images/main/about4.jpg);} .mainAbout .about_list li:hover .hover {visibility: visible; bottom: 0; height: auto; display: block;} .mainAbout .about_list p {font-weight: 200; margin: 30rem 0;} .mainAbout .about_list .about_btn {display: inline-flex; align-items: center; justify-content: center; width: 38rem; height:38rem; border-radius: 3rem; background: var(--white);} .mainAbout .about_list .about_btn .plus_svg {height: 15rem;} .mainAbout .about_list .about_btn:hover {background: var(--primary);} .mainAbout .about_list .about_btn:hover .plus_svg {transform: rotate(90deg); fill: var(--white); transition: .3s;} @media(prefers-reduced-motion:no-preference){ .mainAbout .about_more, .mainAbout .about_list .about_btn:hover {transition: .4s;} .mainAbout .about_list li .hover, .mainAbout .about_list li .hover::before {transition: 1s;} .mainAbout .about_list li:hover .hover{transition: 1.5s;} } @media(max-width: 767px){ .mainAbout .about_top {padding: 90rem 0;} .mainAbout .main_Tit .main__h2 {margin-bottom: 22rem;} .mainAbout .about_more {padding: 15rem 50rem; margin-top: 30rem;} .mainAbout .about_list {grid-template-columns: repeat(2,1fr);} .mainAbout .about_list li {padding: 0;} .mainAbout .about_list li .text {display: none;} .mainAbout .about_list li .hover {position: initial; visibility: visible; display: block; height:auto; padding: 40rem 15rem; } .mainAbout .about_list li .hover::before { height: 100%; } .mainAbout .about_list h4 {margin-bottom: 10rem; } .mainAbout .about_list p {font-size: 15rem; margin: 15rem 0;} .mainAbout .about_list .about_btn {width: 30rem; height: 30rem;} .mainAbout .about_list .about_btn .plus_svg {height: 10rem;} } /* mainBusiness */ .mainBusiness {position: relative; padding-top: 120rem;} .mainBusiness::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; max-height: 415rem; background: #f5f5f5 url(/images/main/business_bg.jpg) no-repeat; background-size: cover; background-position: center; z-index: -1;} .mainBusiness .business_img {display: flex; gap: 50rem; justify-content: space-between; margin-top: 80rem;} .mainBusiness .business_img .img {} .mainBusiness .business_img .img:nth-child(2) {position: relative; margin-top: -180rem;} .mainBusiness .business_img .img img {max-width: 100%; object-fit: contain;} .mainBusiness .business_img {position: relative;} .mainBusiness .business_more {position: absolute; top: -65rem; right: -65rem; display: flex; align-items: center; justify-content: center; width: 130rem; height: 130rem; border-radius: 50%; background: var(--primary); z-index: 5; } .mainBusiness .business_more .plus_svg {width: 22rem; fill: #fff; transition: .5s;} .mainBusiness .business_more:hover .plus_svg {transform: rotate(90deg);} .mainBusiness .business_more::before { content: ''; position: absolute; width: 108rem; height: 108rem; background: url(/images/main/spin_txt.png) no-repeat; background-size: cover; background-position: 50%; animation: spin_txt 6s linear infinite; transform-origin: 50% 50%; } .mainBusiness .rolling_txt {position: absolute; bottom: 60rem; display: flex; align-items: center; gap: 50rem; font-size: var(--fs80); text-transform: uppercase; font-weight: 800; letter-spacing: -0.8rem; font-style: italic; opacity: 0.05; animation: flow_txt 10s linear infinite; z-index: -1;} .mainBusiness .rolling_txt span {white-space: nowrap} @keyframes spin_txt{ 0% {transform: rotate(0);} 100% {transform: rotate(360deg);} } @keyframes flow_txt { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media(max-width: 1280px){ .mainBusiness .business_img .img:nth-child(2) {margin-top: -40rem;} .mainBusiness .business_more {width: 100rem; height: 100rem; top: -25rem; right: -25rem; } .mainBusiness .business_more::before {width: 80rem; height: 80rem;} } @media(max-width: 767px){ .mainBusiness {padding-top: 90rem;} .mainBusiness::before {height: 300rem;} .mainBusiness .main__h2 {font-size: 25rem;} .mainBusiness .business_more {right: 0;} .mainBusiness .business_img {flex-direction: column-reverse; gap: 40rem;} .mainBusiness .business_img .img:nth-child(1) {padding-left: 65rem;} .mainBusiness .business_img .img:nth-child(2) {padding-right: 25rem;} .mainBusiness .rolling_txt {font-size: 60rem;} } /* mainNotice */ .mainNotice {padding: 120rem 0 110rem; background: #171311 url(/images/main/notice_bg.jpg) no-repeat; background-position: 50% 50%; background-size: cover;} .mainNotice .inr {display: flex; align-items: center;} .mainNotice .main_Tit {width: 30%; color: var(--white);} /* .mainNotice .main__h2 {font-weight: 600;} */ .mainNotice .notice_more {position: relative; display: inline-flex; align-items: center; gap: 18rem; margin-top: 70rem; border-radius: 35rem; padding-right: 25rem; overflow: hidden; z-index: 10; } .mainNotice .notice_more:hover::before {width: 100%; } .mainNotice .notice_more::before {content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--primary); border-radius: 35rem; transition: .6s; z-index: -1;} .mainNotice .notice_more img {width: 13rem;} .mainNotice .notice_more i {width: 60rem; height: 60rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary);} .mainNotice .notice_more span {font-size: 14rem; font-weight: 300; color: var(--white);} .mainNotice .notice_list {width: 70%;;} .mainNotice .notice_list ul {display: grid; grid-template-columns: 1fr 1fr; } .mainNotice .notice_list .notice_box {position: relative; display: block; height: 100%; padding: 45rem 45rem; box-sizing: border-box; background: var(--white);} .mainNotice .notice_list .notice_box:hover::before {width: 100%; transition: .6s;} .mainNotice .notice_list .notice_box::before {content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3rem; background: var(--primary);} .mainNotice .notice_list .notice_box em {display: block; font-size: 15rem; font-weight: 600; color: var(--primary);} .mainNotice .notice_list .notice_box h4 {font-size: var(--fs18); font-weight: 600; margin: 15rem 0 20rem; display: -webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp: 1; text-overflow: ellipsis; overflow: hidden;} .mainNotice .notice_list .notice_box p {color:#555; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;} .mainNotice .notice_list .notice_box span {display: block; font-size: 15rem; color: #777; margin-top: 25rem;} @media(max-width: 767px){ .mainNotice {padding: 90rem 0 70rem;} .mainNotice .inr {gap: 40rem; flex-direction: column;} .mainNotice .main_Tit, .mainNotice .notice_list {width: 100%;} .mainNotice .notice_more {margin-top: 35rem; gap: 12rem} .mainNotice .notice_more i {width: 50rem; height: 50rem;} .mainNotice .notice_more img {height: 10rem;} .mainNotice .notice_list .notice_box {padding: 35rem 30rem;} } /* dialog modal */ body:has(#dialog[open]){ overflow: hidden; } .dialogBtn.show{ display: contents; background: 0; font-size: inherit; } #dialog{ position: fixed; inset: 0; margin: auto; display: block; width: min(600px, 92vw); padding: 0; background: #fff; border: 0; z-index: 151; } #dialog:not([open]){ visibility: hidden; opacity: 0; } #dialog::backdrop{ display: none; } .dialogHead{ display: flex; align-items: center; justify-content: space-between; height: 3.4375em; padding: .9375em; background: #686e82; box-sizing: border-box; color: #fff; } .dialogBtn.close{ position: relative; width: 1.1875em; height: 1.1875em; background: url('/images/module/btn_close.png') no-repeat 50% / contain; font-size: inherit; } .dialogBtn.close::before{ content: ''; position: absolute; inset: -5px; } .dialogBody, .dialogIframe{ overflow: auto; display: block; width: 100%; height: min(590px, calc(85vh - 3.4375em)); padding: .9375em; background: #fff; box-sizing: border-box; border: 0; } .dialogBackdrop{ position: fixed; inset: 0; background: #000; opacity: .8; z-index: -1; } @media(prefers-reduced-motion:no-preference){ #dialog{ transition: opacity .4s, visibility .4s; } .dialogBackdrop{ transition: .4s; } }