@charset "utf-8";
/* *******************************************************
 * filename : main_responsive.css
 * description : 메인 레이아웃 및 컨텐츠 반응형 CSS
 * date : 2024-12-20
******************************************************** */

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1780px ){
	#rightBar,
	.main-visual-pagination-box #rightBar{right:var(--area-padding);}
}
@media all and ( max-width: 1280px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{padding-right: var(--area-padding) !important; padding-bottom: 5rem !important;}
	.main-visual-txt-inner .main-visual-txt1{font-size:6rem;}

	/* 메인 비주얼 :: 프로세스바 */
	.main-visual-pagination-box{bottom:5rem;}
	.main-visual-container .main-visual-pagination.swiper-pagination{width: calc(100% - 16rem);}
}
@media all and ( max-width: 800px ){
	#mainVisual {/* height:106rem !important; */ min-height: 60rem;}
	.main-visual-img.display-pc-img{display: none;}
	.main-visual-img.display-m-img{display: block; position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #000;}
	.main-visual-img.display-m-img img{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; /* object-fit: cover; */ object-fit: cover;}
	.main-visual-container .slide-inner.video{background-color: #000;}
	.main-visual-con .m-video {height: 100%;}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{padding-top: 120px !important; padding-right: var(--area-padding) !important; padding-bottom: 18rem !important; flex-direction: column-reverse; justify-content: flex-start;}
	.main-visual-txt-inner{margin-top: 5rem; max-width: none; width: 100%;}
	.main-visual-txt-inner .main-visual-txt1{font-size:5.6rem; line-height: 0.8;}
	.main-visual-txt-inner .main-visual-txt2{margin-top: 2rem; font-size:1.6rem; width: calc(100% - 7rem);}

	.main-visual-prd-inner{width: 100%; height: 42.45%; max-height: 45rem; position: relative;}
	.main-visual-prd-inner .prd-img{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; max-width: 100%; max-height: 100%;     transform-origin: bottom; transform: rotate(24deg); opacity: 0.04;}
	.main-visual-prd-inner .prd-info{position: absolute; bottom: 3rem; right: 0; width: 18.4rem; z-index: 4;}
	.main-visual-prd-inner .prd-info h5{font-size: 2.4rem; line-height: 1.3; letter-spacing: -0.02em; font-weight: 600; color: #fff;}
	.main-visual-prd-inner .prd-info p{margin-top: 1rem; font-size: 1.4rem; line-height: 1.71; letter-spacing: -0.01em; color: rgba(255,255,255,0.6);}

	/* 메인 비주얼 :: 프로세스바 */
	.main-visual-pagination-box{bottom:5rem;}
	.main-visual-pagination-box .area-wide{position: relative;}
	.main-visual-container .main-visual-pagination.swiper-pagination{position: relative; width: calc(100% - 9rem); display: block;}
	.main-visual-container .main-visual-pagination button.swiper-pagination-bullet {margin-left: 0; position: absolute; left: 0; bottom: 0; width: 100% !important; padding-bottom: 1.5rem; margin-bottom: 3rem; margin-bottom: 0; font-size: 1.8rem; line-height: 1.3; opacity: 0;}
	.main-visual-container .main-visual-pagination .num {font-size: 1.8rem; line-height: 1.3;}
	.main-visual-container .main-visual-pagination .progress-bar {bottom:-2px; height:2px;}
	.main-visual-container .main-visual-pagination button.swiper-pagination-bullet-active{opacity: 1;}

	/* 메인 비주얼 :: 화살표 */
	.main-visual-arrow{display: block; width: 100%; margin-left: -1rem;}
	.main-visual-arrow button{width: 4rem; height: 4rem;}
	.main-visual-arrow button + button{margin-left: 1rem;}
	.main-visual-arrow button i{font-size: 3.2rem; color: #fff;}
	
	#rightBar,
	.main-visual-pagination-box #rightBar{right:var(--area-padding);}
	#rightBar > ul > li + li{margin-top: 1rem;}
	#rightBar > ul > li > a{padding: 0 1.5rem; min-width: 6rem; height: 6rem; font-size: 2.4rem; line-height: 6rem;}
	#rightBar > ul > li > a i{top: 0.2rem;}
	#rightBar > ul > li > a em{left: 3rem; font-size: 1.8rem;}
	.rightbar-newsletter-box{padding: 3rem; width: 30rem; height: 40rem; height: auto; border-radius: 2rem;}
	.rightbar-newsletter-tit em{font-size: 1.8rem; line-height: 1.3;}
	.rightbar-newsletter-tit i{font-size: 2.4rem;}
	.rightbar-newsletter-close-btn{font-size: 2.4rem;}
	.rightbar-newsletter-form{margin-top: 2.5rem;}
	.rightbar-newsletter-form-list{margin: -0.5rem 0;}
	.rightbar-newsletter-form-item{margin: 0.5rem 0; width: 100%;}
	.main-now-tit{width: 12rem;}
	.rightbar-newsletter-form-item input{padding: 0 2rem; padding-left: 8rem !important; height: 5rem; font-size: 1.4rem; line-height: 1.3;}
	.rightbar-newsletter-form-item .form-label{top: 1.5rem; left: 2rem; font-size: 1.4rem; line-height: 2rem;}
	.rightbar-newsletter-btn{margin-top: 2rem;}
	.rightbar-newsletter-btn .btn{width: 100%; height: 5rem; font-size: 1.8rem;}
}
@media all and ( max-width: 480px ){
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box{padding-top: 100px !important; padding-bottom: 14rem !important;}
	.main-visual-txt-inner{margin-top: 1rem;}
	.main-visual-txt-inner .main-visual-txt1{font-size:5rem;}

	.main-visual-prd-inner{height: 40%;}
	.main-visual-prd-inner .prd-info{bottom: 3rem;}
	.main-visual-prd-inner .prd-info h5{font-size: 2.2rem;}

	/* 메인 비주얼 :: 프로세스바 */
	.main-visual-pagination-box{bottom:3rem;}
}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1280px ){
	.main-tit-box .main-sub-tit{font-size: 5rem;}
}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size: 2rem; line-height: 1.3;}
	.main-tit-box .main-sub-tit{margin-top:1.5rem; font-size: 3rem; line-height: 1.33;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(What we do) -------- */
@media all and ( max-width: 1280px ){
	.main-what-inner .tit{font-size: 2.2rem;}
}
@media all and ( max-width: 800px ){
	#mainWhatCon{height: 88rem; display: flex; align-items: flex-end;}

	.main-what-txt-group{margin-top: 0;}
	.main-what-list-con{display:block; width:100%; height:60rem;}
	.main-what-item{display:block; position:relative; width:100%; height:16.66%; border-left: 0; border-top: 1px solid rgba(255,255,255,0.12);}
	.main-what-item:before{display: none;}
	.main-what-item > a{position: relative; display: block; width: 100%; height:100%;}
	.main-what-inner{opacity: 1; padding-bottom: 0; align-items:center; justify-content: center; text-align: center; width: 100%; height:100%;}
	.main-what-inner .tit{width: 100%; height: 2.6em; font-size: 2.4rem; line-height: 1.3; color:rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center;}

	/* 고정 텍스트 */
	.main-what-fixed-txt{top: 10rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(News Room) -------- */
@media all and (max-width:1580px){
	.main-news-prev{left: -10rem;}
	.main-news-next{right: -10rem;}
}
@media all and (max-width:1520px){
	.main-news-controls {width: calc(100% - 16rem);}
	.main-news-btn{margin-top: 0; width: 6rem; height: 6rem; font-size: 6rem;}
	.main-news-prev {top: auto; bottom: -2.6rem; left: auto; right: 7rem;}
	.main-news-next {right: -10rem; top: auto; bottom: -2.6rem; right: 0;}
}
@media all and ( max-width: 800px ){
	#mainNewsCon{padding: 15rem 0 8.5rem;}

	.main-news-bottom{margin-top: 6rem; position: relative;}
	.main-news-btn{margin-top: 0; width: 6rem; height: 6rem; font-size: 5.4rem;}
	.main-news-prev {top: auto; bottom: -2.6rem; left: auto; right: 6.5rem;}
	.main-news-next {right: -10rem; top: auto; bottom: -2.6rem; right: 0;}
	.main-news-container{width: 90%; margin-left: 0 !important; overflow: visible !important;}
	.main-news-item{width: 100%;}
	.main-news-txt{padding: 4rem;}
	.main-news-txt .category{font-size: 1.5rem; line-height: 1.3;}
	.main-news-txt .tit{margin-top: 1rem; font-size: 2rem; line-height: 1.58;}
	.main-news-txt .date{margin-top: 2rem; font-size: 1.4rem; line-height: 1.3;}

	/* Controls */
	.main-news-controls {width: calc(110% - 14rem);}
	.main-news-controls .swiper-scrollbar{margin-top:6rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠3(Now we are) -------- */
@media all and ( max-width: 800px ){
	#mainNowCon{padding-bottom: 15rem; background-color: #000;}
	.main-now-outer{position: relative; padding: 8rem 0 3rem; background: url("../images/main/main_now_bg.jpg") center/cover no-repeat;}
	.main-now-outer:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: url("../images/main/main_now_cover.png") center/cover no-repeat;}

	.main-now-con{display: flex; flex-wrap:wrap; justify-content: space-between; position: relative;}

	#mainNowCon .main-now-left{width: 100%; max-width: none; padding-right: 0;}
	.main-now-left-inner{padding-top: 0;}
	.main-tech-support-btn{margin-top: 2rem; width: 100%; height: 6rem; font-size: 1.8rem; line-height: 1.3;}
	.main-tech-support-btn .txt{padding: 0 2.5rem 0 3rem;}
	.main-tech-support-btn .txt i{font-size: 2.4rem;}
	.main-tech-support-txt{margin-top: 3rem; font-size: 1.5rem; line-height: 1.3; width: 100%; text-align: left;}
	.main-tech-support-txt em{font-size: 2rem; margin-right: 0.5rem;}
	.main-tech-support-txt.m-none,
	.main-tech-support-btn.m-none{display: none;}
	.main-tech-support-txt.pc-none{display: block;}
	.main-tech-support-btn.pc-none{display: flex;}

	.main-now-right{margin-top: 7rem; padding-top: 0; width: 100%;}
	.main-now-info-txt{margin-bottom: 1.5rem; font-size: 1.3rem; line-height: 1.3;}
	.main-now-info-txt em{font-size: 2rem; margin-right: 0.5rem;}
	.main-now-list{margin: -0.5rem 0;}
	.main-now-item{margin: 0.5rem 0; width: 100%;}
	.main-now-tit{width: 10rem;}
	.main-now-item input,
	.main-now-item textarea{padding: 0 2rem; padding-left: 10rem !important; width: 100%; font-size: 1.55rem; line-height: 1.3;}
	.main-now-item input{height: 6rem;}
	.main-now-item textarea{padding: 2rem; height: 14rem;}
	.main-now-item .form-label{top: 2rem; left: 2rem; font-size: 1.5rem; line-height: 2rem;}
	.main-now-item .form-label em{top: -1rem; left: -2rem; font-size: 2rem;}
	/* 연락처 */
	.phone-form-box{padding-left: 10rem !important; padding-right: 0;}
	.phone-form-box .fakeform-selectbox{width: 8rem;}
	.phone-form-box .fakeform-selectbox .select-title{text-indent: 0;}
	.phone-form-box .fakeform-selectbox .select-title:after {right: 0;}
	.phone-form-box input{padding-left: 0 !important; padding-right: 0 !important; width: calc(25% - 1rem);}
	.phone-form-box .hypen{font-size: 2rem; width: 1rem;}
	/* 보안코드 */
	.security-code-box .write-input{padding-left: 10rem !important; padding-right: 13rem; height: 6rem;}
	.security-code-box .security-code{right: 3rem; width: 10rem; font-size: 1.6rem; line-height: 6rem;}

	/* ***********************
		*	페이크폼 스타일 추가css 
	*********************** */
	/* fake form - 기본 select 스타일 */
	.fakeform-selectbox .select-title {text-indent: 10rem; height: 6rem; line-height: 6rem; font-size:1.5rem;}
	.fakeform-selectbox .select-title:after{right:1.5rem;}
	/* 옵션창 */
	.select-option span,
	.select-option strong {font-size: 1.5rem; line-height: 1.5; padding: 1.5rem 2rem;}
	
	.main-now-agree{margin-top: 3.5rem;}
	.main-now-agree .agree-txt{padding-left: 2rem; font-size:1.5rem;}
	.main-now-agree .agree-txt label{padding-left:3.4rem;}
	.main-now-agree .agree-txt label:before {top: -0.35rem; font-size: 2.4rem;}
	.main-now-agree ul li{margin-top: 2.5rem; padding-left: 2rem; padding-right: 7rem;}
	.main-now-agree ul li + li{margin-top: 2rem;}
	.main-now-agree ul li a{font-size: 1.5rem; line-height: 1.3;}

	.main-now-btn{margin-top:3rem; padding-top: 3rem; justify-content: center;}
	.main-now-btn .btn{width: 100%; height: 6rem; font-size: 1.8rem;}
}



/* ******************  메인 오른쪽 퀵메뉴 ********************** */