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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	#mainVisual {height: 105.5rem;}
	.main-visual-img-cover {border-radius: 4rem;}
	.main-visual-txt-inner {width: 100%; padding: 16rem var(--area-padding) 0; box-sizing: border-box;}
	.main-visual-txt-box .main-visual-txt1 {font-size: 7.4rem;}
}
@media all and ( max-width: 800px ){
	/* 구형 브라우저 fallback */
	#mainVisual {height: min(100vh, calc(100vw * 915 / 412));}
	/* dvh + dvw: 화면 넘침 없이 이미지 비율(412×915) 유지 */
	#mainVisual {height: min(100dvh, calc(100dvw * 915 / 412));}
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	/* 슬라이드 공통 — 원래 설정 유지 */
	.main-visual-item .main-visual-m-img{
		display: block;
		top: 0 !important;
		height: 100% !important;
		transform: translateX(-50%) !important;
		background-size: cover !important;
		background-position: center top !important;
		animation: none !important;
	}
	/* 슬라이드1만 — 412×915 전신 인물 잘림 없도록 수정 */
	.main-visual-item:first-child .main-visual-m-img{
		background-size: 100%  !important;
		background-position: top center !important;
	}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner {padding: 10rem var(--area-padding) 0;}
	.main-visual-txt-box .main-visual-txt1 {font-size: 4.4rem;}
	.main-visual-txt-box .main-visual-txt2 {font-size: 1.6rem; margin-top: 2rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width:1280px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit {font-size: 4.4rem;}
}
@media all and ( max-width: 800px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit {font-size: 3.2rem;}
	.main-tit-box .main-sub-tit {font-size: 1.8rem;}
	
	.cm-main-btn {width: 21rem; height:5.2rem; margin-top: 2.4rem;}
	.cm-main-btn .txt {font-size: 1.6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(About PINTEL) -------- */
@media all and (max-width:1660px){
	.main-bg-svg {right: 5rem;}
	.main-con01 {padding: 18rem var(--area-padding) 27rem;}
}
@media all and (max-width:800px){
	.main-bg-svg {right:-5rem;}
	.main-con01 {padding: 16rem var(--area-padding) 20rem;}
	.main-con01-txt.pc-ver {display: none;}
	.main-con01-txt.m-ver {display: block;}
	.main-con01-txt .text{font-size: 3rem;}
	.main-con01 .main-sub-tit {font-size: 1.6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Full-Stack AI) -------- */
@media all and (max-width:1280px){
	.main-ai-list-con {width: 52rem; height: 52rem;}
	.main-ai-txt-wrap {width: calc(100% - 52rem); padding-left: 10rem; box-sizing: border-box;}
	.main-ai-list-con:before { border-radius: 10rem;}
	.main-ai-txt-pc {height: 14rem;}
}
@media all and (max-width:800px){
	.main-con02-inner { flex-direction:column-reverse; align-items: start; justify-content:start;}
	.main-ai-list-con {width: 100%; height: 0; padding-top: 100%; }
	.main-ai-list-con:before {border-radius: 6rem;}
	.main-ai-txt-wrap {width: 100%; padding-left: 0; margin-bottom: 3.5rem;}
	.main-ai-list {position: absolute; width: calc(100% - 14.6rem); height: calc(100% - 14.6rem); top:7.3rem; left: 7.3rem;}
	.main-ai-list:before {}
	
	.main-ai-list li {width: 9.6rem; height: 9.6rem ;}
	.main-ai-list li.item01 {top: 3.4rem;left: 3.4rem;}
	.main-ai-list li.item02 {top: 3.4rem; right: 3.4rem;}
	.main-ai-list li.item03 {bottom: 3.4rem; right:3.4rem;}
	.main-ai-list li.item04 {bottom: 3.4rem; left: 3.4rem;}
	.main-ai-list li .icon-box {width: 3rem; height: 2.5rem; margin: 0 auto;}
	.main-ai-list li .icon-box svg {max-width: 100%; max-height: 100%;}
	.main-ai-list li strong {font-size: 1.4rem;}
	
	.main-ai-list-con .inner-txt .tit {font-size: 2.3rem;}
	.main-ai-list-con .inner-txt span {font-size: 1.5rem;}
	.main-ai-txt-pc {display: none;}
	.main-ai-txt-m {position: relative; display: block; height: 14rem;  margin-top: 3.4rem;}
	.main-ai-txt-m .main-txt01 {font-size: 2rem; font-weight: 700; letter-spacing: -0.05em; color: #171A20; line-height: 1.6;}
	.main-ai-txt-m .main-txt02 {font-size: 1.8rem; font-weight: 500; letter-spacing: -0.05em; color: #5C5E62; line-height: 1.75;  margin-top: 0.5rem; } 
}
@media all and (max-width:640px){
	.main-ai-list { width: calc(100% - 10.6rem); height: calc(100% - 10.6rem);  top: 5.3rem; left: 5.3rem;}
	.main-ai-list li.item01 {top: 2.4rem;left: 2.4rem;}
	.main-ai-list li.item02 {top: 2.4rem; right: 2.4rem;}
	.main-ai-list li.item03 {bottom: 2.4rem; right:2.4rem;}
	.main-ai-list li.item04 {bottom: 2.4rem; left: 2.4rem;}
}
@media all and (max-width:480px){
	.main-ai-list li.item01 {top: 0.4rem;left: 0.4rem;}
	.main-ai-list li.item02 {top: 0.4rem; right: 0.4rem;}
	.main-ai-list li.item03 {bottom: 0.4rem; right:0.4rem;}
	.main-ai-list li.item04 {bottom: 0.4rem; left: 0.4rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (PREVAX) -------- */
@media all and (max-width:1280px){
	#mainContent3 {padding: 25rem 0;}
	
	.main-con03 {display: block;}
	.main-con03 .left-con {width: 100%; margin-bottom: 5rem;}
	.main-con03 .right-con {width: 100%;}
}
@media all and (max-width:800px){
	#mainContent3 {padding: 13rem 0 19rem;}
	.main-con03-list {margin: -0.6rem 0;}
	.main-con03-list li {margin: 0.6rem 0; width: 100%; padding: 2.5rem 2.8rem;}
	.main-con03-list li .icon-box {position: absolute; right:3.4rem; top: 50%; margin-top: -3.4rem;}
	.main-con03-list li .tit-box strong {font-size: 2.2rem;}
	.main-con03-list li .tit-box p {margin-top: 0.5rem;}
	.main-con03-list li .hash-box {padding-top: 1.4rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4 (Our Mission) -------- */
@media all and (max-width:1660px){
	.main-con04-box {padding: 2.5rem;}
	.main-count-list {padding-right: 5%;}
}
@media all and (max-width:1280px){
	.main-con04-tit-con .tit {font-size: 6.2rem;}
	.main-con04-tit-con .txt-box .txt01 {font-size: 4.4rem;}
	.main-history-btn {width: 28rem; padding: 3.5rem;}
	.main-history-btn h5 {font-size: 6.8rem;}
	.main-count-list {width: calc(100% - 28rem);}
	.main-count-list > li > p {font-size: 1.8rem;}
	.count-num-box{ font-size:7rem}
	.count-num-box > p { font-size:7rem; line-height: 7rem;} 
	.count-num-item-wrap .count-num-item-box{height: 70rem; } 
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size: 7rem;}
	.count-unit  {font-size: 7rem;}
}
@media all and (max-width:800px){
	#mainContent4 {position: relative; padding-top: 0;}
	#mainContent4:before {position: absolute; content: ''; width: 87.1rem; height:  87.1rem; left: -60%; bottom: 0; background: url(/images/content/bg_circle_m.png)no-repeat center/100%; z-index: -1;}
	.main-con04-tit-con {display: block; margin-bottom: 6rem;}
	.main-con04-tit-con .tit {width: 100%; font-size: 5rem; margin-bottom: 2.5rem;}
	.main-con04-tit-con .txt-box {width: 100%; padding-left: 0;}
	.main-con04-tit-con .txt-box:before,
	.main-con04-tit-con .txt-box:after {display: none;}
	.main-con04-tit-con .txt-box .txt01 {font-size: 3.2rem;}
	.main-con04-tit-con .txt-box .txt02 {font-size: 1.6rem ;}
	
	.main-con04-box {padding: 3rem 2.4rem; display: block;}
	.main-count-list {width: 100%; display: block; padding-right: 0;}
	.main-count-list > li {width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem;}
	
	.main-count-list .number {margin-top: 0;}
	.count-num-box{ font-size:6rem}
	.count-num-box > p { font-size:7rem; line-height: 6rem;} 
	.count-num-item-wrap .count-num-item-box{height: 60rem; } 
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size: 6rem;}
	.count-unit  {font-size: 6rem;}
	.count-unit i {font-size: 2.8rem;}
	
	.main-history-btn {width: 100%; height: 15.2rem; flex-direction:row; align-items: end; border-radius: 3rem; padding: 3rem;}
	.main-history-btn h5 {font-size: 6.5rem;}
	.main-history-btn h5 span {font-size: 1.8rem;}
}
@media all and (max-width:480px){
	.ios-os .count-num-item-wrap .count-num-item-box{position: relative; top: 6px;}
	.ios-os .count-num-item-wrap .count-num-item-box.down .count-num-item {position: relative; top: -6px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5 (PR) -------- */
@media all and (max-width:800px){
	.main-con05 {padding: 13rem 0 14rem;}
	.main-con05-con { display: block;}
	.main-con05-con .left-con {width: 100%; margin-bottom: 5rem;}
	.main-con05-con .main-tit-box .main-tit {font-size: 5rem;}
	.main-con05-con .right-con {width: 100%;}
	
	.main-news-list li a {height: auto; padding: 2rem 1rem; flex-direction:column-reverse;}
	.main-news-list li a .date {text-align: left; width: 100%; margin-bottom: 0.5rem;}
	.main-news-list li a .tit {width: 100%;}
	.main-news-list li a .tit strong {white-space: normal; overflow: visible; text-overflow: unset; font-size: 1.8rem; line-height: 1.55;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠6 (Partners) -------- */
@media all and (max-width:800px){
	#mainContent6 {position: relative; padding-bottom: 13rem;}
	#mainContent6:before {position: absolute; content: ''; width: 87.1rem; height:  87.1rem; right: -70%; top:-20rem; background: url(/images/content/bg_circle_m.png)no-repeat center/100%; z-index: -1;}
	.main-con06 .main-tit-box {text-align: left;}	
}

/* -------- 메인 컨텐츠 :: 컨텐츠7 (Support) -------- */
@media all and (max-width:1280px){
	.main-con07 {display: block;}
	.main-con07 .left-con {width: 100%; margin-bottom: 5rem;}
	.main-con07 .right-con {width: 100%;}
}
@media all and (max-width:800px){
	#mainContent7 {padding-bottom: 10rem;}
	#mainContent7:before {position: absolute; content: ''; width: 87.1rem; height:  87.1rem; left: -70%; bottom: 0; background: url(/images/content/bg_circle_m.png)no-repeat center/100%; z-index: -1;}
	.main-con07-list {margin: -0.6rem 0;}
	.main-con07-list li {margin: 0.6rem 0; width: 100%; min-height: 12.6rem;}
	.main-con07-list li a {display: flex; align-items: center; justify-content: space-between; padding: 2rem 3rem; border-radius: 2.6rem;}
	.main-con07-list li a .tit-box p {display: none;}
	.main-con07-list li a .tit-box strong {font-size: 2.6rem;}
	.main-con07-list li a .icon-box {position: relative; bottom: auto; right: 0;}
	
}