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

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
		
	/* 메인 비주얼 :: 인트로 */
	.main-intro-logo-box {transform: translate(-50%, -50%) scale(0.72);}
	.main-intro-logo-box02 {width: 840px; height: 140px;}
	.main-intro-logo-box02 .display-t {display: block; }
	.main-intro-logo-box02 .display-pc,
	.main-intro-logo-box02 .display-m,
	.main-intro-logo-box02 .display-m2 {display: none;}
	.main-intro-inner .inner  {transform: translateY(-13rem);}
	.main-intro-txt {padding-left: 0; text-align: center; }

	/* 메인 비주얼 :: Installer Locator 버튼 */
	.main-installer-locator-btn {right: auto; left: 50%; margin-left:-6.5rem ;}
	
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner {justify-content: center; flex-direction: column; padding-left: 0; transform: translateY(-12rem);}
	.main-visual-pagination.swiper-pagination {margin-left: 0; margin-top: 1rem;}
	.main-visual-logo {transform: translate(-50%, -50%) scale(0.72);}
	
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-clipped-img {transform: translate(-50%, -50%) scale(0.72);}
	.main-visual-item .main-visual-clipped-img img {transform: translate(-50%, -50%) scale(1.4);}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 인트로 */
	.main-intro-logo-box {transform: translate(-50%, -50%) scale(0.55);}
	.main-intro-logo-box02 {width: 642px; height: 107px;}
	.main-intro-logo-box02 .display-m {display: block; }
	.main-intro-logo-box02 .display-pc,
	.main-intro-logo-box02 .display-t,
	.main-intro-logo-box02 .display-m2 {display: none;}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-logo {transform: translate(-50%, -50%) scale(0.55);}
	
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-clipped-img {transform: translate(-50%, -50%) scale(0.55);}
	.main-visual-item .main-visual-clipped-img img {transform: translate(-50%, -50%) scale(1.85);;}

	/* 메인 비주얼 :: Installer Locator 버튼 */
	.main-installer-locator-btn {width: 11.4rem; height: 11.4rem; bottom: 8rem;  border-radius:  11.4rem;}
}
@media all and ( max-width: 480px ){
	.main-intro-logo-box {transform: translate(-50%, -50%) scale(0.3);}
	.main-intro-logo-box02 {width: 350px; height: 58px;}
	.main-intro-logo-box02 .display-m ,
	.main-intro-logo-box02 .display-pc,
	.main-intro-logo-box02 .display-t {display: none; }
	.main-intro-logo-box02 .display-m2 {display: block;}

	.main-visual-logo {transform: translate(-50%, -50%) scale(0.3);}

	.main-visual-item .main-visual-clipped-img {transform: translate(-50%, -50%) scale(0.3);}
	.main-visual-item .main-visual-clipped-img img {transform: translate(-50%, -50%) scale(3.2);}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
@media all and ( max-width: 1280px ){
	.main-tit-box .main-tit {font-size: 9rem;}
}
@media all and ( max-width: 800px ){
	.main-tit-box .main-tit {font-size: 6.6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠1(Ultrafit Total) -------- */
@media all and (max-width:1280px){
	.main-con01-tit > .text, .main-con01-tit .text .char {font-size: 8rem;}	
	.main-con01-list.display-pc {display: flex;}
/* 	#mobileCon.display-m {display: none;}
	.main-con01-list.display-m {display: none;} */
}
@media all and (max-width:800px){
	.main-con01-wrap{ }
	.main-con01-wrap .main-con01-bg {height: 100vh;}
	/* .main-con01-tit-wrap {position: relative; width: 100%; height: 100vh; top: 0; left: 0; transform: translate(0, 0); display: flex; align-items: center; justify-content: center; text-align: center;} */
	.main-con01-tit.pc-ver {display: none;}
	.main-con01-tit.m-ver {display: block;}
	.main-con01-tit > .text, .main-con01-tit .text .char {font-size: 5rem;}
	.main-con01-list {height: auto; display: block;  transform:translateY(100%); opacity: 0; margin: -2rem 0; }
	.main-con01-list li {width: 100%; margin: 2rem 0; backdrop-filter: blur(0);}
	.main-con01-list li .inner {height: auto; padding: 4rem 3rem;}
	.main-con01-list li .inner dl {margin-bottom: 2.5rem;}
	.main-con01-list li .inner dl dt .tit {font-size: 2.4rem;}
	.main-con01-list li .inner .icon-box img {height: 5rem;}

	/* .main-con01-list {display: block; transform:translateY(20%); opacity: 0; margin: 0;}
	.main-con01-list.display-pc {display: none !important;}
	#mobileCon.display-m {display: block; position: relative; padding: 25rem 0;}
	.main-con01-list.display-m {display: block;}
	.main-con01-list {transform: translateY(15%); opacity: 1;}
	.main-con01-list li  {width: 100%; margin: 0 0 1.5rem 0; background: rgba(0, 0, 0, 0.5);}
	.main-con01-list li .inner {height: auto; padding: 4.5rem 4rem; box-shadow: 2.7rem 2.7rem 4.3rem rgba(0, 0, 0,0.15);}
	.main-con01-list li .inner dl {margin-bottom: 2.5rem;} */
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 (Ultrafit Film) -------- */
@media all and (max-width:1280px){
	.main-con02 {padding: 20rem 0;}
	.main-film-con .display-pc {display: block;}
	.main-film-con .display-m {display: none;}
	.main-film-list li a .txt-box .tit {font-size: 2.2rem;}
}
@media all and (max-width:800px){
	.main-con02 {padding: 10rem 0 13rem;}
	.main-film-con .display-pc {display: none;}
	.main-film-con .display-m {display: block;}
	
	.main-film-list-m {display: flex; flex-wrap: wrap; margin: -1.5rem;}
	.main-film-list-m li {width: calc(50% - 3rem); margin: 1.5rem;}
	.main-film-list-m li a {position: relative; display: block; width: 100%; }
	.main-film-list-m li a .img-box {position: relative; width: 100%; height: 0; padding-top: 100%; border-radius: 2.4rem; overflow: hidden;}
	.main-film-list-m li a .img-box:before {position: absolute; top: 1.4rem; right: 1.4rem; z-index: 2; font-size: 3.2rem; color: #fff; content: '\e915'; font-family: xeicon; transform:rotate(45deg); opacity: 0; transition: all 0.3s;}
	.main-film-list-m li a .img-box .img {position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0;}
	.main-film-list-m li a .img-box .img-on {position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; transition: all 0.3s;}
	.main-film-list-m li a .txt-box {margin-top: 2rem;}
	.main-film-list-m li a .txt-box .tit {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.015em; color: #000; line-height: 1.2;;}
	.main-film-list-m li a .txt-box .txt {margin: -0.6rem; font-size: 1.3rem; font-weight: 500; letter-spacing: -0.015em; color: #000; opacity: 0.5; line-height: 1.2; margin-top: 1rem;}
	.main-film-list-m li a .txt-box .txt span {position: relative; display: inline-block; margin: 0.6rem;}
	.main-film-list-m li a .txt-box .txt span:before {position: absolute;}
}
@media all and (max-width:480px){
	.main-film-list-m { margin: -1.5rem 0;}
	.main-film-list-m li {width: 100%; margin: 1.5rem 0;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 (About ULTRAFIT) -------- */
@media all and (max-width:1700px){
	.main-con03-wrap {padding: 0 12px; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
	.main-con03-wrap .main-con03-bg {width: 100%;}
	.main-con03-wrap.animated .main-con03-bg  {width: calc(100% - 24px); margin: 0 auto;}
}
@media all and (max-width:1280px){
	.main-con03-wrap .main-con03-bg {height: 135rem; top: 14rem;}
	/* .main-con03-wrap.animated .main-con03-bg {top: 14rem;} */
	.main-con03-wrap .main-con03-inner {height: 125rem; padding-bottom: 8rem;}
}
@media all and (max-width:800px){
	.main-con03-wrap .main-tit-box {transform:translateY(8rem);}
	.main-con03-tit-con .main-tit-box .main-tit {font-size: 7rem;}
	.main-con03-wrap .main-con03-bg { height: calc(100% - 11rem); top: 11rem;}
	/* .main-con03-wrap.animated .main-con03-bg {top: 11rem;} */
	.main-con03-wrap .main-con03-inner {height: auto;}
	.main-about-top {padding-right: 0; padding-bottom: 28rem;}
	.main-about-top .main-more-btn {position: relative; margin-top: 5rem;}
	.main-about-top .main-tit-box .main-txt01 {margin-top: 3rem;}
	.main-about-top .main-tit-box .main-txt02 {display: none;}
	.main-about-bottom {display: block;}
	.main-about-item {width: 100%;}
	.main-about-item.item02 {padding-left: 0; padding-top: 5rem;}
	.main-about-item .inner-item {height: auto; padding: 2.5rem 0;}
	.main-about-item dl dt {font-size: 2.8rem;}
}
/* -------- 메인 컨텐츠 :: 컨텐츠4 (Request a Sample) -------- */
@media all and (max-width:800px){
	.main-con04 {padding: 13rem 0;}
	.main-con04 .maskBg .marquee .absol h4 {font-size: 9rem;}
	.main-con04-txt-wrap {display: none;}
	.main-con04-m {display: block;}
	.main-con04-m .main-more-btn {margin: 2.8rem auto 0; width: 10rem; height: 10rem; border-radius:50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid #000; color: #000; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
	.main-con04-m .main-more-btn i {font-size: 2.4rem;}
	.main-con04-m .main-more-btn span {font-size: 1.5rem; font-weight: 500; letter-spacing: -0.015em; display: block; margin-top: 0.7rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5 (Installer Locator) -------- */
@media all and (max-width:800px){
	.main-con05 {padding: 10rem 0;}
	.main-con05 .main-tit-box .main-tit {font-size: 5rem;}
	.main-con05 .main-tit-box .main-txt02 {display: none;}
	.main-con05-bottom {flex-wrap: wrap; padding-top: 4.5rem;}
	.main-con05-num-box {width: 100%;    justify-content: flex-end;}
	.main-con05-num-box .count-num-box .num {font-size: 14rem;}
	.main-con05-num-box .count-num-item-wrap{height:4.66em; overflow:hidden;}
	.main-con05-num-box .count-num-item-wrap .count-num-item-box{height:46.6em; }
	.main-con05-num-box .count-num-item-wrap .count-num-item-box .count-num-item {font-size: 14rem;}
	.main-con05-bottom .main-con05-btn {width: 12rem; height: 12rem; margin-top: 0; margin-bottom: 8rem;}
}