@import url('/css/popup.css');

/* visual */
.mainVis {position: relative; height: 970rem; overflow: hidden; 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 .mainVis__txt h2 {font-size:var(--fs60); font-weight: 700; margin-bottom: 40rem; color: #fff;}
.mainVis .mainVis__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}
.mainVis .scroll_down{overflow:hidden; position:absolute; left:50%; bottom:0; transform: translateX(-50%); z-index:3;}
.mainVis .scroll_down{font-size:12rem; color:#fff;}
.mainVis .scroll_down span{display:block; position:relative; width:1px; height:65px; margin:10px auto 0; background:rgba(255,255,255,0.4);}
.mainVis .scroll_down span:before{content:''; display:block; position:absolute; top:0; left:0; width:1px; height:10px; background:#fff; animation:scroll 2s infinite;}
.mainVis_derection {position: relative; display:flex; justify-content:center; align-items:center; position:absolute; right:0; bottom:0; padding: 0 50rem; box-sizing: border-box; z-index:9; background: #1aabda; width:360rem; height:110rem; }
.mainVis_derection::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/images/main/mainvis_btn.jpg) no-repeat; background-position: 50%; background-size: cover ;z-index: -1;}
.mainVis_derection *{color:#fff; font-size: 14rem; font-weight: 300;}
.mainVis_derection div[class^="swiper-button-"]::before{font-weight:300; font-size:14rem;}
.mainVis_derection .count {text-align: center;}
.mainVis_derection .count > *{font-weight:300; font-size:13rem; }
.mainVis_derection .mainVis__next::before{content:"NEXT"; cursor: pointer;}
.mainVis_derection .mainVis__prev::before{content:"PREV"; cursor: pointer;}
.mainVis_derection div[class^="swiper-button-"]{cursor:pointer;}

@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); }
	}
	.mainVis__txt > *{ opacity: 0; animation: visual_txt .8s .3s both; }
	.mainVis__txt > *:nth-child(2){ animation-delay: .6s; }
	.mainVis__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 .scroll_down {display: none;}
	.mainVis .mainVis__txt h2 {line-height: 1.4; margin-bottom: 20rem;}
	.mainVis_derection {width: 250rem; height: 70rem; padding: 0 30rem;}
	.mainVis_derection .count{margin:0 30rem;}
}
@keyframes scroll{
	0%{top:0;}
	100%{top:100%;}
}

/* common */
.mainTitle {}
.main__small {font-size: 17rem; font-weight: 500; color: var(--primary);}
.main__h2 {font-size: var(--fs42); font-weight: 700; margin: 20rem 0 30rem;}
.main__p {font-size: 17rem; line-height: 1.7; color: var(--gray);}
.main__btn {margin-top: 50rem; color: #888; font-size: 15rem; display: inline-flex; align-items: center; justify-content: space-between; width: 200rem; height: 60rem; padding: 0 25rem; box-sizing: border-box; border-radius: 4rem; border: 1rem solid #e1e1e1;}
.main__btn svg {width: 6rem; fill: #888;}
.mainBusiness .main__btn:hover {border-color: #888; color: #111; transition: .3s;}
.mainBusiness .main__btn:hover svg {fill: #111;}

/* mainBusiness */
.mainBusiness {position: relative; padding: 140rem 0 120rem;}
.mainBusiness .inr {display: flex; justify-content: space-between;}
.mainBusiness .buLeft {position: relative;}
.mainBusiness .buLeft .mainTitle {position: sticky; top: 50rem; padding-bottom: 300rem;}
.mainBusiness .buLeft .mainTitle::before {content: ''; position: absolute; bottom:0; left: -260rem; width: 729rem; height: 190rem; background: url(/images/main/main_bg.png) no-repeat; background-size: cover; z-index: -1; opacity: 0.5;}
.mainBusiness .buRight {padding-left: 50rem;}
.mainBusiness .buCont + .buCont {margin-top: 70rem;}
.mainBusiness .buCont .buImg {border-radius: 10rem; overflow: hidden; margin-bottom: 30rem;}
.mainBusiness .buCont .buImg img {max-width: 100%; width: 100%;}
.mainBusiness .buCont .buInfo {display: flex; justify-content: space-between; align-items: center;}
.mainBusiness .buCont .buInfo dt {font-size: var(--fs22); font-weight: 700; margin-bottom: 15rem;}
.mainBusiness .buCont .buInfo dd {font-size: 17rem; color: var(--gray);}
.mainBusiness .buCont .buInfo__btn {display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; border-radius: 50%; background: #efefef; transition: .3s;}
.mainBusiness .buCont .buInfo__btn svg {height: 11rem; fill: #888; transition: .3s;}
.mainBusiness .buCont .buInfo__btn:hover svg {fill: #fff;}
.mainBusiness .buCont .buInfo__btn:hover {background: var(--primary);}

@media(max-width:767px){
	.main__h2 {margin: 15rem 0 20rem;}
	.main__btn {margin-top: 35rem;}
	.mainBusiness {padding: 80rem 0 80rem;}
	.mainBusiness .inr {flex-wrap: wrap; gap: 50rem}
	.mainBusiness .buLeft .mainTitle {padding-bottom: 0;}
	.mainBusiness .buLeft .mainTitle::before {display: none;}
	.mainBusiness .buRight {padding-left: 0; width: 100%;}
	.mainBusiness .buCont .buImg {margin-bottom: 20rem;}
	.mainBusiness .buCont .buInfo dt {margin-bottom: 10rem;}
	.mainBusiness .buCont + .buCont {margin-top: 30rem;}
}

/* mainBoard */
.mainBoard {padding: 100rem 0 140rem; border-top: 1rem solid #e8e8e8;}
.mainBoard .inr {display: flex; justify-content: space-between; }
.mainBoard .boardLeft {width: 50%;}
.mainBoard .boardRight {width: 45%;}
.mainBoard .boardTitle {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30rem;}
.mainBoard .boardTitle h3 {font-size: var(--fs28); display: flex; align-items: center; gap: 25rem;} 
.mainBoard .boardTitle h3 span {font-size: 16rem; font-weight: 500; color: #b7b7b7;}
.mainBoard .boardTitle svg {width: 18rem;}
.mainBoard .boardLeft .noCont {display: flex; justify-content: space-between; padding: 20rem 10rem; }
.mainBoard .boardLeft .noCont .noDate {font-size: 14rem; color: #a9a9a9;}
.mainBoard .boardLeft .noCont dl {max-width: 500rem;}
.mainBoard .boardLeft .noCont dt {font-size: var(--fs18); font-weight: 600; }
.mainBoard .boardLeft .noCont dd {color: var(--gray); margin-top: 15rem;}
.mainBoard .boardLeft .noCont:hover dt {text-decoration: underline;}
.mainBoard .boardLeft li {border-bottom: 1rem solid #e1e1e1;}
.mainBoard .boardLeft li:first-child > a {padding-top: 0;} 
.mainBoard .boardLeft li+li .noCont dd{display: none;}
.mainBoard .boardRight .CaseSwiper {overflow: hidden;}
.mainBoard .boardRight .caseCont {position: relative;}
.mainBoard .boardRight .caseCont .img {width: 100%; border-radius: 8rem; overflow: hidden; }
.mainBoard .boardRight .caseCont .img:hover img {transform: scale(1.1); transition: all .4s;}
.mainBoard .boardRight .caseCont .img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.mainBoard .boardRight .caseCont span {position: absolute; right: 0; bottom: 20rem; font-weight: 600; width: 240rem; height: 58rem; line-height: 58rem; padding: 0 15rem; box-sizing: border-box; border-radius: 4rem 0 0 4rem; background: #fff;}
.mainBoard .boardRight .boarBtn {display: flex; align-items: center;}
.mainBoard .boardRight .boarBtn svg {fill: var(--gray);}
.mainBoard .boardRight .boarBtn i {display: block; width: 1rem; height: 12rem; background: #b7b7b7; margin: 0 15rem;}

@media(max-width:767px){
	.mainBoard {padding: 80rem 0 80rem; }
	.mainBoard .inr {flex-direction: column; gap: 50rem; }
	.mainBoard .boardTitle {margin-bottom: 20rem;}
	.mainBoard .boardTitle h3 {gap: 18rem;}
	.mainBoard .boardLeft, .mainBoard .boardRight {width: 100%;}
	.mainBoard .boardLeft .noCont dl {max-width: 300rem;}
	.mainBoard .boardLeft .noCont dd {margin-top: 10rem;}
	.mainBoard .boardRight .caseCont .img {height: 220rem;}
	.mainBoard .boardRight .caseCont span {bottom: 10rem; padding: 0 10rem; width: 220rem; height: 45rem; line-height: 45rem; border-radius: 5rem 0 0 0;}
}

/* mainContact */
.mainContact {position: relative; padding-bottom: 80rem;}
.mainContact::before {content: ''; position: absolute; top: 0; left: 0; width: 48%; height: 630rem; background: url(/images/main/contact_bg.jpg) no-repeat; background-position: 50% 50%; background-size: cover; border-radius: 0 15rem 15rem 0;}
.mainContact .inr{display: flex; justify-content: space-between; align-items: center;}
.mainContact .ContLeft {width: 48%; padding: 170rem 0;}
.mainContact .mainTitle {color: #fff;}
.mainContact .CsTitle { margin-bottom: 30rem;}
.mainContact .main__p {color: #fff; font-weight: 300;}
.mainContact .main__btn {color: rgba(255, 255, 255, 0.6); border: 1rem solid rgba(255, 255, 255, 0.35); transition: .3s;}
.mainContact .main__btn:hover {border-color: rgba(255, 255, 255, 0.7); color: var(--white);}
.mainContact .main__btn:hover svg {opacity: 1;}
.mainContact .main__btn svg {fill: var(--white); opacity: 0.6;}
.mainContact .ContRight {width: 52%; padding-left: 90rem;}
.mainContact .ContRight h3 {display: flex; align-items: center; gap: 25rem; font-size: var(--fs28); font-weight: 700;}
.mainContact .ContRight h3 span {font-size: 16rem; font-weight: 500; color: #b7b7b7;}
.main_inquiry__form{  display: grid; grid-template-columns: repeat(2, 1fr); gap: 15rem clamp(15rem, calc( 28 / var(--inr) * 100vw ), 28rem); }
.main_inquiry__form :where(input, textarea){ margin: 0; height: auto; padding: 20rem 15rem; background: #f5f5f5; border: 1rem solid #eee; border-radius: 5rem; box-sizing: border-box; font-size: 15rem; font-weight: 300; color: inherit; }
.main_inquiry__form :where(input, textarea)::placeholder{ color: #777; }
.main_inquiry__form [class^="wrap_"]{ display: flex; align-items: baseline; }
.main_inquiry__form [class^="wrap_"]:not(.wrap_checkbox) input{ flex: 1; width: 1px; }
.main_inquiry__form [class^="wrap_"] span{ display: inline-block; flex-shrink: 0; text-align: center; width: 25rem; }
.main_inquiry__form textarea{ min-height: 110rem; }
.main_inquiry__form .wrap_checkbox{ gap: 8rem; font-size: 15rem; font-weight: 300; color: #555; justify-content: flex-end; align-items: center; }
#checkbox{ aspect-ratio: 1/1; width: 15rem; }
#privacyLink{ text-decoration: underline; text-underline-position: under; }
#online_btn{display: flex; align-items: center; justify-content: center; height: 62rem; background: var(--black); border-radius: 5rem; font-size: 17rem; color: #fff; }

@media(min-width:768px){
	.main_custom > .inr{ grid-template: 'i s' 'i n' / 60.57% 37.28%; }
	.main_inquiry__form :where(.wrap_email, textarea, .wrap_checkbox, #online_btn){ grid-column: 1/3; }
	.main_notice{ height: 190rem; }
	.main_notice__desc{ min-height: 3.25em; }
}

@media(max-width:1279px){
	.mainContact .ContRight {padding-left: 40rem;}
	.main_inquiry__form :where(input, textarea) {padding: 15rem 10rem;}
}

@media(max-width:767px){
	.mainContact {padding-bottom: 80rem;}
	.mainContact .inr {flex-direction: column; gap: 50rem;}
	.mainContact::before {width: 100%; height: 450rem; border-radius: 0;}
	.mainContact .CsTitle {margin-bottom: 20rem;}
	.mainContact .ContLeft {width:100%; height: 450rem; padding: 80rem 0; }
	.mainContact .ContRight {width: 100%; padding-left: 0;}
	.main_custom > .inr{ grid-template: 'i' 's' 'n'; }
	.main_inquiry__form{ grid-template-columns: 1fr; }
}