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

/* ****************** 
 * 메인 레이아웃(Fullpage) 
 ********************** */
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section{height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}

/* ****************** 
 * 공통 
 ********************** */
@media all and ( max-width: 1280px ){
	.cm-main-content{margin: 0 var(--area-padding) 6rem; height: 75rem;}
	.cm-main-txt1{font-size: 7rem;}
}
@media all and ( max-width: 800px ){
	/* 메인 컨텐츠 */
	.cm-main-content{padding: 6rem 0; height: auto;}
	/* 메인 컨텐츠 :: 배경 */
	.cm-main-bg.pc-ver{display: none;}
	.cm-main-bg.m-ver{display: block;}

	/* 메인 컨텐츠 :: 이미지 */
	.cm-main-img-con{margin-top: 5rem; position:static; width:100%; height: auto;}
	.cm-main-img-box{height: auto;}
	.cm-main-img-box.flex-end{justify-content: center;}
	.cm-main-img-inner{max-height: 70%; opacity:0;filter:Alpha(opacity=0); transition: all ease-in-out 0.8s;}
	.cm-main-img-inner img{max-width: 100%; max-height: 100%; animation: imgupDown 3s ease-in-out 1.1s infinite;}
	/* active */
	.cm-main-img-inner.active-item {opacity:1;filter:Alpha(opacity=100);}

	/* 메인 컨텐츠 :: 텍스트 */
	.cm-main-txt-con{position:static; width:100%; height: auto;}
	.cm-main-txt-box{height:auto;}
	.cm-main-txt-inner{width: 100%; display: block;}
	.cm-main-txt-box.flex-end .cm-main-txt-inner{padding-left: 0;}
	.cm-main-txt1{font-size:4.5rem; line-height: 1;}
	.cm-main-txt1 b:before{top: 0; right: -1.5rem; width: 1.3rem; height: 1.3rem;}
	.cm-main-txt2{margin-top: 3rem; font-size:2rem; line-height: 1.46;}
	.cm-main-txt3{margin-top: 1.5rem; font-size:1.8rem; line-height: 1.66;}
}

/* ************************************  
	* 메인 컨텐츠 :: 메인비주얼 
**************************************** */
@media all and ( max-width: 1720px ){
	#mainVisual .cm-main-txt-box {max-width: none; padding-left: 11rem;}
}
@media all and ( max-width: 1280px ){
	#mainVisual .cm-main-img-inner {padding-top: 0; width: 60%; margin-right: -7.14%;}
}
@media all and ( max-width: 800px ){
	#mainVisual .cm-main-txt-box {padding: 0 var(--area-padding);}
	#mainVisual .cm-main-img-inner{margin-right: 0; width: 100%;}
	#mainVisual .cm-main-txt2{margin-top: 3rem;}

	/* 메인 비주얼 :: 스크롤아이콘 */
	.main-scroll-icon{display: none !important;}
}

/* ************************************  
	* 메인 컨텐츠 01 :: 회사소개 
**************************************** */
@media all and ( max-width: 800px ){
	#mainCompanyCon .cm-main-img-inner{width: 100%;}
}

/* ************************************  
	* 메인 컨텐츠 02 :: 마케팅 
**************************************** */
@media all and ( max-width: 1280px ){
	.main-marketing-con{margin: calc(var(--header-height) / 1.5) auto 6rem;}
}
@media all and ( max-width: 800px ){
	.main-marketing-con{margin: 0 auto 6rem;}
	.main-marketing-con .area{width: 100%; display: block;}
	.main-marketing-left{padding: 4rem 0 6rem; width: 100%;}
	.main-marketing-left:before{margin-top: -18rem; left: calc(-1 * var(--area-padding)); width: 100%; height: 34rem; background: url('/images/main/main_marketing_tit_bg.png') center/contain no-repeat;}

	.main-marketing-right{width: 100%;}
	.main-marketing-item{width: 100%;}
	.main-marketing-item + .main-marketing-item{margin-top: 2rem;}
	.main-marketing-inner p{top: 12%; left: 6%; right: 6%; font-size: 2rem; line-height: 1.5;}
}

/* ************************************  
	* 메인 컨텐츠 03 :: IT 
**************************************** */
@media all and ( max-width: 800px ){
	#mainItCon .cm-main-img-inner{width: 100%;}
	.main-it-wrapper{margin: 2rem auto 0; max-width: 24rem;}
	.main-it-list{margin: -1rem 0;display: flex; flex-wrap:wrap;}
	.main-it-item{margin: 1rem 0; width: 100%; height: 15.6rem;}
	.main-it-item .num{font-size: 2rem;}
	.main-it-item .txt{margin-top: 1rem; font-size: 2rem; line-height: 1.5;}
}

/* ************************************  
	* 메인 컨텐츠 04 :: 리스크관리(보험)
**************************************** */
@media all and ( max-width: 1280px ){
	.main-insurance-con{margin: calc(var(--header-height) / 1.5) auto 6rem;}
	.main-insurance-list{margin: 0 -2.5rem;}
	.main-insurance-item{margin: 0 2.5rem; width: calc(33.33% - 5rem);}
	.main-insurance-txt p{font-size: 2.2rem;}
}
@media all and ( max-width: 800px ){
	.main-insurance-con{margin: 0 auto 6rem;}
	.main-insurance-top .cm-main-txt2{margin-top: 4rem; display: block;}
	.main-insurance-top .cm-main-txt3{margin-left: 0; margin-top: 2rem; display: block;}
	.main-insurance-top .cm-main-txt3.active-item{animation-delay: 0.5s;}

	.main-insurance-bottom{margin: 7rem auto 0; max-width: 480px;}
	.main-insurance-list{margin: -3rem 0;}
	.main-insurance-item{margin: 3rem 0; width: 100%;}
	.main-insurance-item:last-child .main-insurance-txt{padding-right: 2rem; box-sizing: border-box;}
	.main-insurance-txt p{font-size: 2rem; line-height: 1.5;}
	.main-insurance-txt a{margin: 2rem auto 0; padding: 0 4rem 0 2rem; width: 18rem; height: 4rem; font-size: 1.6rem; line-height: 4rem;}
	.main-insurance-txt a i{margin-top: -0.8rem; right: 2rem;}
}

/* ************************************  
	* 메인 컨텐츠 05 :: 세무·법무·노무 
**************************************** */
@media all and ( max-width: 1280px ){
	.main-legal-con{margin: calc(var(--header-height) / 1.5) auto 6rem;}
	.main-legal-list{margin: -1rem;}
	.main-legal-item{margin: 1rem; width: calc(33.33% - 2rem);}
	.main-legal-img img{height: 10rem;}
}
@media all and ( max-width: 800px ){
	.main-legal-con{margin: 0 auto 6rem;}
	.main-legal-con .area{width: 100%; display: block;}

	.main-legal-left{width: 100%;}

	.main-legal-right{margin-top: 4.5rem; width: 100%;}
	.main-legal-list{margin: -0.5rem;}
	.main-legal-item{padding: 2.5rem 2rem; margin: 0.5rem; width: calc(50% - 1rem); min-height: 24rem;}
	.main-legal-txt .num{font-size: 2rem;}
	.main-legal-txt .num:after{bottom: 0; right: -1.5rem; width: 0.6rem; height: 0.6rem;}
	.main-legal-txt .tit{margin-top: 1rem; font-size: 2rem; line-height: 1.6;}
	.main-legal-img img{height: 8rem;}
}