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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1660px ){
	.main-visual-center-img span {max-width: 37rem;}
	.main-visual-txt-box .main-visual-txt1 {font-size: 5rem;}
	
}
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
	
	.main-visual-txt-box .main-visual-txt1 {font-size: 4rem;}
	.main-visual-txt-box .main-visual-txt1.main-visual-first-txt {font-size: 5rem;}
	.main-visual-logo-box img {max-height:60px;}
	.main-visual-item.item02 .main-visual-logo-box img {height:70px ;}
	.main-visual-center-img span {max-width: 30rem;}

}
@media all and ( max-width: 800px ){
	.main-visual-item:not(.item01) .main-visual-txt-box {align-items: start;}
	.main-visual-item:not(.item01) .main-visual-txt-inner {padding-top: calc(var(--header-height) + 2rem) ; display: block;}
	.main-visual-txt-box {text-align: center;}
	.main-visual-txt-box .main-visual-txt1 {font-size: 3.2rem; padding-top: 0;}
	.main-visual-txt-box .main-visual-txt1 br:not(.m-br) {display: none;}
	.main-visual-txt-box .main-visual-txt2 {font-size: 1.6rem; margin-top: 2rem;}
	.main-visual-txt-box .main-visual-txt2 br {display: none;}
	.main-visual-txt-box .main-visual-txt1, 
	.main-visual-txt-box .main-visual-txt2, 
	.main-visual-txt-box .main-visual-logo-box {padding-right: 0;}
	.main-visual-logo-box {margin-top: 4rem;  display: flex; justify-content: center;}
	.main-visual-logo-box img {max-height:40px;}
	.main-visual-center-img span {max-width: 24rem;}
	.main-visual-txt-box .main-visual-txt1.main-visual-first-txt{font-size: 3.6rem;}
	.main-visual-item.item02 .main-visual-logo-box img {height:50px ;}
	
	.main-visual-dots .slick-dots li {width: 100%;  display: none;}
	.main-visual-dots .slick-dots li.slick-active {display: block !important;}
	.main-visual-dots .slick-dots li .loading-bar-line {display: block;}
	.main-visual-arrow {display: block; position: absolute; right: var(--area-padding); bottom:-1rem; z-index: 10;}
	.main-visual-arrow button {font-size: 3.2rem; color: #fff; opacity: 0.5;}
	.main-visual-arrow button:hover {opacity: 1;}
}
@media all and ( max-width: 480px ){
	.main-visual-center-img span {max-width: 22rem;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit {font-size: 4.2rem;}
	.main-tit-box .main-txt {margin-top: 2.5rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(브랜드소개) -------- */
@media all and ( max-width: 1560px ){
	.main-banner-txt-con .banner-txt {left: var(--area-padding);}
}
@media all and ( max-width: 1280px ){
	.main-con01-txt01 span {letter-spacing: 0.2em; font-size: 6rem;}
	.main-con01-txt02 span {font-size: 8rem;}
}
@media all and ( max-width: 800px ){
	.main-con01-txt01 span {letter-spacing: 0.02em; font-size: 3.8rem;}
	.main-con01-txt02 span {font-size: 4.2rem;}
	.main-con01-txt03 span {font-size: 3.6rem;}
	.main-con01-txt04 span {font-size: 3.6rem;}
	.main-banner-txt-con .banner-txt .txt {font-size: 3.2rem;}
	.main-banner-txt-con .banner-txt .txt b {font-size: 3.2rem;}
	
	.main-con01-bottom .bottom-txt {font-size: 3.2rem;}
	.main-con01-bottom .bottom-txt b {font-size: 3.6rem; line-height: 3.2rem;}
	
	.main-banner-item .motion-box-inner span img {    filter: brightness(0.8);}
	.main-banner-item .motion-box-inner span img.display-pc {display: none;}
	.main-banner-item .motion-box-inner span img.display-m {display: block;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠2(서비스소개) -------- */
@media all and ( max-width: 1660px ){
	.main-service-list > li .over-inner {padding: 8rem 5rem 5rem;}
	.main-service-list > li .over-inner .bottom-con .left-con {padding-bottom: 8rem ;}
	.main-service-list > li .over-inner-img {width: 38rem; margin-left: 0;}
	.main-service-list > li:nth-child(4)  .over-inner .bottom-con .right-con {width: 44rem}
}
@media all and ( max-width: 1440px ){
	.main-service-list > li .over-inner .bottom-con .left-con {width: 48rem;}
	.main-service-list > li .over-inner .bottom-con .right-con {width: 44rem;}
	.main-service-list > li .over-inner-img {width: 35rem; }
}
@media all and ( max-width: 1280px ){
	.main-service-list > li .inner-wrap .basic-inner .top-tit {margin-top: -20rem;}
	.main-service-list > li .inner-wrap .basic-inner strong {font-size: 9rem;}
	.main-service-list > li .over-inner{padding: var(--header-height) 3rem 5rem;}
	.main-service-list > li .over-inner .top-con .tit {font-size: 6rem;}
	
	.main-service-list > li .over-inner .bottom-con .left-con {padding-bottom: 0;width: 42rem;}
	.main-service-list > li .over-inner .bottom-con .right-con { top: auto; bottom: 5rem; width: 42rem;}
	.main-service-list > li .over-inner .bottom-con .right-con .icon-list li {max-width: 7rem;}
	
	.main-service-list > li:nth-child(4) .over-inner .bottom-con .left-con {padding-bottom:10rem;}
	.main-service-list > li:nth-child(4) .over-inner .bottom-con .right-con {top: auto;}
	
	.main-service-count-item .number {font-size: 3.2rem;}
	.count-num-box{ font-size:3.2rem}
	.count-num-box > p {font-size:3.2rem; line-height: 3.2rem;} 
	.count-unit {font-size: 2.4rem;}
	.count-num-item-wrap .count-num-item-box {height: 32rem;}
	.count-num-item-wrap .count-num-item-box .count-num-item {font-size: 3.2rem;}
	.main-service-count-item .tit {font-size: 1.8rem;}
	.main-service-count-item .number {}
	.main-service-count-item .count-num-box.small {font-size: 2.6rem;}
	.main-service-count-item .count-num-box.small > p {font-size:2.6rem; line-height: 2.6rem;}
	.main-service-count-item .count-unit.small   {font-size: 2rem}
	.main-service-count-item .small .count-num-item-wrap .count-num-item-box {height: 26rem;}
	.main-service-count-item .small .count-num-item-wrap .count-num-item-box .count-num-item {font-size: 2.6rem;}
	
	.main-service-list > li .over-inner-img { /* width: 30rem; margin-left: 3rem; */ display: none;}
}
@media all and ( max-width: 800px ){
	#mainContent2 {height: 140vh;}
	.main-service-list {flex-direction:column;}
	.main-service-list > li {height: 25%;}
	.main-service-list > li:before {display: none;}
	.main-service-list > li .inner-wrap .basic-inner { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--area-padding);  box-sizing: border-box;}
	.main-service-list > li .inner-wrap .basic-inner .top-tit {position: relative; left: 0; top: auto; transform: translate(0, 0); text-align: left; margin-top: 0;}
	.main-service-list > li .inner-wrap .basic-inner .top-tit strong {font-size: 5rem;}
	.main-service-list > li .inner-wrap .basic-inner dl {position: relative; width: auto; z-index: 1; padding: 0; }
	.main-service-list > li .inner-wrap .basic-inner dl dd img {height: 40px;}
	.main-service-list > li .inner-wrap .basic-inner:before {opacity: 1;  left: 0;   background-color: rgba(0, 0, 0, 0.3);}
	
	.main-service-list > li.not-active .inner-wrap .basic-inner dl {display:none;}
	.main-service-list > li.not-active .inner-wrap .basic-inner {justify-content: center; }
	.main-service-list > li .over-inner {justify-content: start; padding: 5rem var(--area-padding) 5rem;}
	.main-service-list > li .over-inner .top-con {display: block; margin-bottom: 3rem; text-align: center;}
	.main-service-list > li .over-inner .top-con .tit {font-size: 4rem; margin-right: 0;}
	.main-service-list > li .over-inner .top-con .txt-box {margin-top: 1rem;}
	.main-service-list > li .over-inner .bottom-con .left-con {text-align:center; width: 100%; margin-bottom: 4rem;}
	.main-service-list > li .over-inner .bottom-con .left-con > .tit-box {width: 100% !important; max-width: none !important; padding:1rem;}
	.main-service-list > li .over-inner .bottom-con .left-con > .tit {font-size: 2.4rem; margin-bottom: 2rem; }
	.main-service-list > li:nth-child(4) .over-inner .bottom-con .left-con {padding-bottom: 0;}
	.main-service-list > li:nth-child(4) .over-inner .bottom-con .left-con > .tit {font-size: 2.4rem;}
	
	.main-service-list > li .over-inner .bottom-con .right-con {position: relative; width: 100% !important; top: 0 !important; text-align:center; bottom: 0;}
	.main-service-list > li .over-inner .bottom-con .right-con .logo-box img {height: 40px;}
	.main-service-list > li .over-inner .bottom-con .right-con .logo-box img.display-pc {display: none;}
	.main-service-list > li .over-inner .bottom-con .right-con .logo-box img.display-m { display: inline-block;}
	.main-service-list > li:nth-child(4) .over-inner .bottom-con .right-con .logo-box img {height: 140px;}
	.main-service-list > li .over-inner .bottom-con .right-con .icon-list {justify-content: center;}
	.main-service-list > li .over-inner .bottom-con .right-con .icon-list li {width: calc(50% - 0.4rem); display: flex; flex-direction:row-reverse; align-items: center; text-align: left; padding: 0.5rem 1.5rem; max-width: 9.5rem;}
	.main-service-list > li .over-inner .bottom-con .right-con .icon-list li .icon {margin: 0; }
	.main-service-list > li .over-inner .bottom-con .right-con .icon-list li strong {width: calc(100% - 2.5rem); margin-top: 0;}
	
	.main-service-list > li .over-inner .bottom-con .right-con .more-btn {width: 6rem; height: 6rem; margin: 2.5rem auto 0;}
	.main-service-list > li .over-inner-img {display: none;}
	
	.main-service-count-list {padding-bottom: 0; margin:-0.25rem}
	.main-service-count-item {width: calc(33.33% - 0.5rem); height: 9rem; margin:0.25rem}
	.main-service-count-item .item-tit {font-size:1.3rem}
	.main-service-count-item .tit {font-size:1.5rem;}
	.main-service-list > li.active { flex: 0 1 76%;}
}
@media all and ( max-width: 480px ){
	.main-service-list > li .over-inner .bottom-con .right-con .icon-list li {max-width: none;}
	.ios-os .count-num-item-wrap .count-num-item-box{position: relative; top: 2px;}
	.ios-os .count-num-item-wrap .count-num-item-box.down .count-num-item {position: relative; top: -2px;}
	.ios-os .small .count-num-item-wrap .count-num-item-box{position: relative; top: 5px;}
	.ios-os .small .count-num-item-wrap .count-num-item-box.down .count-num-item {position: relative; top: -5px;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(뉴스+파트너) -------- */
@media all and ( max-width: 1280px ){
	.main-cardnews-list .slick-list {margin: 0 -2rem;}
	.main-cardnews-list .slick-slide {margin: 0 2rem;}

	.main-news-list .slick-list {margin: 0 -2rem;}
	.main-news-list .slick-slide {margin: 0 2rem;}
}
@media all and ( max-width: 800px ){
	#mainContent3 {padding: 10rem 0;}
	.main-news-con {padding-top: 8rem;}
	.main-news-top {flex-wrap: wrap; }
	.main-news-top .main-tit-box {width: 100%;}
	.main-parter-con {padding-top: 12rem;}
	.main-parter-con .main-tit-box .main-tit {font-size: 3.6rem;}
	.main-partners-list .partner-item {width: 15rem; height: 6rem;}
	.main-news-top .main-news-control-con {margin-top: 2rem;}
	
	.main-cardnews-list a .info-box .txt {font-size: 1.8rem; margin-bottom: 1.5rem ;}
	.main-cardnews-list a .info-box dl {display: block;}
	.main-cardnews-list a .info-box dl dt {display: inline-flex; white-space: unset; height: auto; padding: 0.4rem 1.5rem; margin-bottom: 1rem;}
	
}
@media all and ( max-width: 480px ){
	.main-cardnews-list a .info-box dl {display:flex;}
	.main-cardnews-list a .info-box dl dt {margin-bottom:0;}
}