/********************************************
* VISUAL 메인 비주얼
********************************************/
.main-visual { position: relative; width: 100%; height: 82rem; } 
.main-visual .swiper-slide { width: 100%; height: 82rem; } 
.main-visual .visual-item01 { background-image: url(/wp-content/uploads/2025/05/visual01.jpg); } 
.main-visual .visual-item02 { background-image: url(/wp-content/uploads/2025/05/visual02.jpg); } 
.main-visual .visual-item03 { background-image: url(/wp-content/uploads/2025/05/visual03.jpg); } 

.main-visual-circle { position: absolute; right: 12.5rem; bottom: 10rem; z-index: 10; display: flex; justify-content: center; align-items: center; width: 15.4rem; height: 15.4rem; border-radius: 100%; border: 1px solid #fff; transition: all .3s; } 
.main-visual-circle:hover { background-color: rgba(255, 255, 255, 0.1); }

.quick-wrap { position: fixed; top: 30%; right: 16rem; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3rem; padding: 4rem 2.5rem; border-radius: 5rem; border: 1px solid #fff; transition: all 0.7s; } 
.quick-wrap.on { background-color: rgba(0, 0, 0, 0.7); } 
.quick-wrap a figure { display: flex; justify-content: center; align-items: center; width: 3.5rem; height: 3.5rem; } 

.quick-wrap a img { transition: all .3s; }
.quick-wrap a:hover img {
  opacity: 0.5;
}

/********************************************
* SEC01
********************************************/
#mainAboutCon { margin-bottom: 11rem; } 
.main-sec-col { display: flex; } 
.main-sec01-box { width: 50%; background-size: 103% !important; transition: all .5s; } 
.main-sec01-box a { display: block; padding: 10rem; } 
.main-sec01-left { background: url(/wp-content/uploads/2025/05/sec01-bg01.jpg) center center; } 
.main-sec01-right { background: url(/wp-content/uploads/2025/05/sec01-bg02.jpg) center center; } 
.main-sec .main-sec01-box h2,
.main-sec .main-sec01-box p { color: #fff; } 
.main-sec .main-sec01-left p { font-size: 2.5rem; } 
.main-sec01-left h2 { margin-bottom: 1.5rem; font-size: 4rem; font-weight: 800; } 
.main-sec01-left-col { display: flex; align-items: center; justify-content: space-between; margin-top: 14rem; } 
.sec01-left-btn { display: flex; justify-content: center; align-items: center; width: 20rem; height: 5rem; border-radius: 2.5rem; border: 1px solid #fff; transition: all .5s; } 
.main-sec .main-sec01-left .sec01-left-btn p { font-size: 2.3rem; transition: all .5s; } 

.main-sec01-right a { display: flex; justify-content: center; align-items: center; height: 100%; } 
.main-sec01-right h2 { margin-bottom: 3.5rem; text-align: center; } 
.sec01-right-btn { display: flex; align-items: center; justify-content: center; gap: 4rem; } 
.sec01-right-btn p { font-size: 3.1rem; } 
.sec01-right-btn img { transition: all .5s; } 

.main-sec01-left:hover .sec01-left-btn { background-color: #fff; } 
.main-sec01-left:hover .sec01-left-btn p { color: #070504; } 
.main-sec01-right:hover { background-size: 108% !important; } 
.main-sec01-right:hover .sec01-right-btn img { transform: translate(2rem, 0); } 



/********************************************
* SEC02
********************************************/

.sec02 .main-sec-col { gap: 3rem; } 
.main-sec02-box { width: calc((100% - 3rem) / 2); height: 94.5rem; background-size: 103% !important; transition: background-size .5s ease; -moz-transition: background-size .5s ease; -web-kit-transition: background-size .5s ease; } 
.main-sec02-box a { display: flex; flex-direction: column; height: 100%; padding: 15rem 10rem; } 
.main-sec02-box p { font-size: 2.5rem; } 

.main-sec02-box:hover { background-size: 105% !important; } 

.main-sec02-left { background: url(/wp-content/uploads/2025/05/sec02-img01.jpg) center center; } 
.main-sec02-left h2, .main-sec02-left p { color: #fff; } 
.main-sec02-left h2 { margin-bottom: 2rem; } 
.main-sec02-right { margin-top: 15rem; background: url(/wp-content/uploads/2025/05/sec02-img02.jpg) center center; } 
.main-sec02-right p { margin-bottom: 2rem; } 

.sec02-box-btn { display: flex; justify-content: center; align-items: center; width: 20rem; height: 5rem; margin-top: auto; margin-left: auto; border-radius: 3rem; background-color: #fff; transition: all .5s; } 
.sec02-box-btn p { margin: 0; color: #010101; transition: all .5s; } 

.main-sec02-box:hover .sec02-box-btn { background-color: #070504; } 
.main-sec02-box:hover .sec02-box-btn p { color: #fff; } 



/********************************************
* SEC03
********************************************/

.sec03 { padding: 11rem 10rem 0 10rem; } 
.sec03 .main-sec-col { display: flex; justify-content: center; align-items: center; gap: 4rem; padding: 23rem; background: url(/wp-content/uploads/2025/05/sec03-bg.jpg); } 
.sec03 .main-sec-col .main-sec03-box { width: 61rem; height: 44rem; } 
.sec03 .main-sec-col .main-sec03-box a { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; width: 100%; height: 100%; border: 1px solid #fff; transition: all .5s; } 
.sec03 .main-sec-col .main-sec03-box a h2 { color: #fff; } 
.sec03 .main-sec-col .main-sec03-box a .sec02-box-btn { margin: 0; } 

.sec03 .main-sec-col .main-sec03-box a:hover { background-color: rgba(255, 255, 255, 0.1); } 
.sec03 .main-sec-col .main-sec03-box a:hover .sec02-box-btn { background-color: #000; }
.sec03 .main-sec-col .main-sec03-box a:hover .sec02-box-btn p { color: #fff; }



/* topBtn, telBox */

.tel-box,
.top-btn { display: none; position: fixed; bottom: 100px; right: 100px; z-index: 999999; cursor: pointer; } 

.top-btn-wrap,
.tel-box { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 50px; height: 50px; border-radius: 5px; color: #fff; background-color: #070504; border: 1px solid #fff; } 

.tel-box { display: none; right: 5px; bottom: 5px; } 
.top-btn-wrap span { color: #fff; font-size: 1.4rem; } 
 
 
@media screen and (max-width: 768px){
 .top-btn { right: 5px; bottom: 5px; cursor: pointer; } 
 .tel-box i { font-size: 22px; } 
 .tel-box { display: flex; bottom: 60px; } 
 }
 @media screen and (max-width: 1300px) {
.quick-wrap {right: 2rem;}
.main-visual,.main-visual .swiper-slide {height: 55rem;}
.main-visual .swiper-slide {background-size: cover; background-repeat: no-repeat; background-position: center;}
.main-visual-circle {right: auto; bottom: 5rem; left: 50%; transform: translateX(-50%);}
.main-sec01-box a,.main-sec02-box a {padding: 5rem;}
.main-sec02-box {height: 50rem;}
.sec03 {padding: 6rem 2rem 0;}
.sec03 .main-sec-col {padding: 4rem;}
#mainAboutCon {margin-bottom: 6rem;}
.main-sec01-right,.main-sec01-right:hover {background-size: cover !important; background-repeat: no-repeat;}

 }
@media screen and (max-width: 1024px) {
  .quick-wrap {background-color: rgba(0, 0, 0, 0.7);}
.main-visual,.main-visual .swiper-slide {height: 40rem;}
.main-visual-circle {width: 10rem; height: 10rem; bottom: 4rem;}
.main-visual-circle img {max-width: 65%;}
.quick-wrap {gap: 2rem; padding: 2rem 1.5rem;}
.quick-wrap a figure {width: 2.5rem; height: 2.5rem;}
.main-sec-col {flex-flow: row wrap;}
.main-sec01-box,.main-sec01-right {width: 100%; height: 30rem;}
.main-sec01-box a, .main-sec02-box a {padding: 4rem;}
.main-sec01-left-col {margin-top: 10rem;}
.main-sec01-left h2 {font-size: 3rem; margin-bottom: 0.5rem;}
.main-sec .main-sec01-left p {font-size: 2rem;}
.main-sec .main-sec01-left .sec01-left-btn p {font-size: 1.8rem;}
.sec01-left-btn {width: auto; height: auto; padding: 1rem 2rem;}
.main-sec h2 {font-size: 4rem; margin-bottom: 1rem;}
.sec01-right-btn p {font-size: 2.4rem;}
.sec01-right-btn img {max-width: 25%;}
.main-sec02-box {width: 100%; height: 32rem;}
.main-sec02-right {margin-top: 0;}
.main-sec02-box p {font-size: 1.8rem;}
.sec02-box-btn p {font-size: 1.8rem;}
.sec02-box-btn {width: auto; height: auto; padding: 1rem 2rem;}
.sec03 .main-sec-col .main-sec03-box {width: 100%; height: 30rem;}

}
@media screen and (max-width: 767px) {
.main-visual, .main-visual .swiper-slide {height: 35rem;}
.main-visual-circle {bottom: 2rem;} 
.main-sec h2 {font-size: 2.4rem;}
.main-sec .main-sec01-left p {font-size: 1.6rem;}
.main-sec01-left-col {margin-top: 5rem;}
.main-sec01-box, .main-sec01-right {height: 24rem;}
.main-sec .main-sec01-left .sec01-left-btn p,.main-sec .main-sec01-left .sec01-left-btn p {font-size: 1.4rem;}
.sec01-right-btn p {font-size: 1.8rem;}
.main-sec02-box {height: 25rem;}
.sec02 .main-sec-col {gap: 2rem;}
.sec02-box-btn p {font-size: 1.4rem;}
.main-sec02-right-txt > p {margin-bottom: 1rem;}
.sec03 .main-sec-col {padding: 3rem; gap: 3rem;}
.sec03 .main-sec-col .main-sec03-box {height: 20rem;}

}
@media screen and (max-width: 650px) {
.main-visual, .main-visual .swiper-slide {height: 30rem;}
.main-sec01-box a, .main-sec02-box a {padding: 3rem;}
.main-sec h2 {font-size: 2rem;}
.main-sec01-left-col {margin-top: 4rem;}
.main-sec01-box, .main-sec01-right {height: 20rem;}
.sec03 .main-sec-col {padding: 2rem; gap: 2rem;}

.main-visual-circle {width: 8rem; height: 8rem;}
.main-sec02-right{position: relative;}
.main-sec02-right * {position: relative; z-index: 2;}
.main-sec02-right::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; opacity: 0.4;z-index: 1;}

}