@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2021-09-02
******************************************************** */
.main-area {max-width: 1400px;margin: 0px auto;padding-top: 100px;}
.section.active .up_motion > * {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);opacity: 1;}
.full-section-wrap {position: relative;width: 100%;height: 100%;}
a.viewmore_btn.m_view {display: none !important;}

/* ******************  메인 비주얼 ********************** */
/* 메인 비주얼 :: 슬라이드 */
#mainVisual {position: relative;}

/* 메인 비주얼 :: 페이지네이션*/
/* #mainVisual.active .pagination {visibility: visible; opacity: 1; transition-delay: 2s; -webkit-transition: all .35s linear; transition: all .35s linear; z-index:999}
#mainVisual .pagination {width: 100%; z-index: 1; visibility: hidden; opacity: 0; -webkit-transition: all .35s linear; transition: all .35s linear; position: absolute; bottom: 100px; left: 0}
#mainVisual .swiper-pagination {display: inline-block; position: static;}
#mainVisual .swiper-pagination li {padding: 0 10px; text-align: left; float: left;}
#mainVisual .swiper-pagination li a {display: block; width: 90px; font-size: 16px; color: #fff; padding-bottom: 5px; position: relative;}
#mainVisual .swiper-pagination li a:before {content:''; display: block; width: 100%; height: 1px; background-color: rgba(255,255,255,0.5); position: absolute; bottom: 0; left: 0; z-index: 1;}
#mainVisual .swiper-pagination li a:after  {content:''; display: block; width: 100%; height: 3px; background-color: rgba(255,255,255,1); position: absolute; bottom: 0; left: 0; right: 0;z-index: 2; transform: scaleX(0); transform-origin: left;}
#mainVisual .swiper-pagination li.active a:after { transform: scaleX(1); -webkit-transition: transform 10s linear; transition: transform 10s linear}
#mainVisual .pagination .playPause { font-size: 0; width: 30px; height: 30px; border-radius: 50%; border: 0; background-color: transparent; box-sizing: border-box; margin-left: 20px; background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer; }
#mainVisual .pagination .playPause.play { background-image: url(../img/ico_play.png); }
#mainVisual .pagination .playPause.pause { background-image: url(../img/ico_pause.png); } */

.main-visual-con .slick-track,.main-visual-con .slick-list {-webkit-perspective: 2000;-webkit-backface-visibility: hidden;}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{height:100%;}
.main-visual-con{z-index:1;}

/* 메인 비주얼 :: 슬라이드 ::이미지 */
.main-visual-item {position:relative;}
#mainVisualSlide.swiper-container,
#mainVisualSlide .swiper-wrapper{z-index:auto; min-height: 100vh;}
#mainVisualSlide.swiper-container {z-index:100;}
#mainVisualSlide .swiper-slide{background:#fff; height:100%; overflow:hidden; }
#mainVisualSlide .slide-inner {position:relative;width: 100%;height: 100%;background-size: cover !important;background-position: center; }    
.main-visual-item .visual-img {position:absolute;top:0px;left:0px;bottom:0px;right:0px;width:1920px;height:100%;width:100%;background-size:cover !important;}
.main-visual-item .visual-img img {display:none;}
.main-visual-item .main-visual-pc-img{width:100%;height:100%;background-size:cover !important;-webkit-transform: scale(1.05,1.05); transform: scale(1.05,1.05);-webkit-transition:transform 5000ms  ease-in-out ;transition:transform 5000ms ease-in-out ;}
.main-visual-item .main-visual-m-img{display:none;}

/* 메인 비주얼 :: 텍스트 */.main-visual-txt-con{position:absolute;top: 50%;left:0px;width:100%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.main-visual-txt-con .txt-img,
.main-visual-txt-con .main-visual-txt1,
.main-visual-txt-con .main-visual-txt2{opacity:0;display:block}
.main-visual-txt-con .main-visual-txt1{display:block;font-size: 80px;font-weight: 500;color:#fff;}
.main-visual-txt-con .main-visual-txt1 b{font-weight:700; color:#fff}
.main-visual-txt-con .main-visual-txt2{font-size: 26px;font-weight: 300;color:#fff;line-height: 1.5;margin-bottom: 40px;}
.main-visual-txt-con .main-visual-txt2 .mb {display: none;}

/* 메인 비주얼 :: active효과 */
#mainVisual.active .main-visual-txt1,
#mainVisual.active .main-visual-txt2{-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainVisual.active .main-visual-txt-con .txt-img{ -webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;-webkit-animation-delay:0.8s; animation-delay:0.8s;}
#mainVisual.active .main-visual-txt-con {text-align: center;}
#mainVisual.active .main-visual-txt-con .main-visual-txt1{ -webkit-animation-delay:0.9s; animation-delay:0.9s;}
#mainVisual.active .main-visual-txt-con .main-visual-txt2{-webkit-animation-delay:1.3s;animation-delay:1.3s;}
.main-visual-item .main-visual-txt1.splitting .char{-webkit-animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
#mainVisual.active .main-visual-txt1.splitting .char{-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: 스크롤아이콘 */
.main-scroll-icon{position:absolute; width:100%; bottom: 50px; text-align:center; z-index:999; animation: upDown 1.5s ease-in-out infinite;}
.main-scroll-icon span{display:inline-block; width:24px; height:65px; margin-left:-24px; background:url("../img/scroll_down_icon.png") no-repeat; }
@keyframes upDown {
	0% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
	50% {
		opacity: 1;
		transform: translateY(5px);
	}
	100% {
		opacity: 0.5;
		transform:  translateY(-5px);
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}

/* 메인 비주얼 :: 페이징 */
#mainVisualSlide.start + .main-visual-pagination {display:block !important;}
#mainVisual .main-visual-pagination {bottom: 100px; left:6%; z-index:1000;}
.main-visual-pagination .swiper-pagination-bullet {width:60px; height:6px; border:1px solid #fff;  background:none; border-radius:0; margin:0 3px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
 box-sizing: border-box; }
.main-visual-pagination .swiper-pagination-bullet-active {background-color:#fff;}


/* ******************  메인 컨텐츠 ********************** */
/* 추가 */
.section .main-tit .main-title h3{
    font-size: 42px;
    font-weight: 500;
    0color: #111;
    color: #111;
}
#mainProductCon.section .main-tit .main-title h3 br {display: none;}	
.section .main-tit .main-title h4{
    font-size: 20px;
    font-weight: 300;
    padding-bottom: 15px;
}

/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 화살표 */
.more_btn.flex {justify-content: flex-start;}
.more_btn a {position: relative;font-size: 16px;color: #222;font-family: 'Pretendard-Light';}
.more_btn.flex a:nth-child(2) {margin-left: 130px;}
.more_btn a:before {content:'';position: absolute;top: -10px;right: -76px;background: url(../img/cm_style_arrow_g.png)no-repeat center / contain;width: 100%;max-width: 40px;height: 40px;}
.more_btn a:hover:before {transform: translateX(10px)}

.arrow-icon {overflow:hidden; display:block; }
.arrow-icon .arrow {position:relative; display:block; overflow:hidden; width:100%; height:100%; z-index:1;}
.arrow-icon .skew {display:block; position:absolute; left:-150%; bottom:0; content:""; width:133%; height:124%; background:#111;transform:skew(-30deg); opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.8s}
.arrow_gray:before {content:''; position: absolute; top: -7px; right: -96px; background: url(../img/cm_style_arrow_g.png)no-repeat; width: 66px; height: 49px; transition:transform .3s; }
.arrow_gray:hover:before {transform: translateX(10px)}
@media all and (min-width:801px){
	a:hover .arrow-icon .skew {left:-10%; opacity:1.0;filter:Alpha(opacity=100);}
}

/* -------- 메인 컨텐츠 :: 제품소개 -------- */
#mainProductCon.section .main-tit .main-title {text-align: center;}
/**/
#mainProductCon .main-product-con .con {margin: 80px -1% 0;}
#mainProductCon .main-product-con .con > div {float: left;width: calc(100% / 3 - 2%);margin: 0 1%;}
#mainProductCon .main-product-con .con > div:last-child {margin-right: 0;}
#mainProductCon .main-product-con .con div.imgBox {position: relative;overflow: hidden;}
#mainProductCon .main-product-con .con div.imgBox:after {content:'';display:block;position:absolute;top:0;left: -90%;z-index: 1;width: 50%;height:100%;background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);transform:skewX(-30deg);}
#mainProductCon .main-product-con .con div:hover div.imgBox:after { animation: shine 1s; }
#mainProductCon .main-product-con .con div.imgBox > img {width: 100%;}
#mainProductCon .main-product-con .con > div .txt_wrap {text-align: center;margin-top: 30px;}
#mainProductCon .main-product-con .con > div .txt_wrap  strong {display: block;font-size: 22px;font-weight: 500;color: #111;margin-bottom: 20px;}
#mainProductCon .main-product-con .con > div .txt_wrap p {font-size: 18px;font-weight: 300;color: #666;line-height: 1.4;}
/* ani */
@keyframes shine {
 0% {
  left:-90%;
 } 
 100% {
  left:140%;
 } 
}

/* -------- 메인 컨텐츠 :: ABOUT US -------- */
#mainAboutCon .area-box {max-width: 100%;margin-left: 14%;padding-top: 100px;}
/**/
.main-about-con {position: relative; }
/*.main-about-con .main-about-tit {position: absolute; top: 26%; left: 0; float: left; width: 32%;}*/
.main-about-con .main-about-tit {float: left;width: 26%;padding-top: 80px;}
.main-about-con .main-about-tit h3 {}
.main-about-con .main-about-tit strong {font-size: 42px; color: #333; font-family: 'Pretendard-Bold'; margin: 35px 0 45px; display: block; line-height: 1.4;}
.main-about-con .main-about-tit p {font-size: 18px;color: #666;line-height: 1.6;margin: 50px auto 55px;font-weight: 300;}
.main-about-con ul.main-about-list {float: right;width: 74%;margin: 0 -1%;max-height: 515px;}
.main-about-con ul.main-about-list li {float: left;width: calc(100% / 3 - 2%);height: 515px;margin: 0 1%;box-sizing: border-box;box-shadow: -2px 2px 13px -4px rgba(0,0,0,0.3);background: #5bc7d5;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}
.main-about-con ul.main-about-list li:hover {-webkit-transform: translateY(-10%); transform: translateY(-10%); -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }
.main-about-con ul.main-about-list li:first-child {background: var(--main-color);}
.main-about-con ul.main-about-list li:nth-child(2) {background: #30afbf;}
.main-about-con ul.main-about-list li a {display: block;width: 100%;height: 100%;padding: 27% 20% 0 16%;box-sizing: border-box;line-height: 1.2;}
.main-about-con ul.main-about-list li img {}
.main-about-con ul.main-about-list li .txt_wrap {color: #fff;}
.main-about-con ul.main-about-list li .txt_wrap > strong {display: block;font-size: 30px;font-family: 'Pretendard-Medium';padding: 50px 0 40px;font-weight: unset;}
.main-about-con ul.main-about-list li .txt_wrap > strong br {display: none;}
.main-about-con ul.main-about-list li .txt_wrap p {font-size: 18px;font-family: 'Pretendard-ExtraLight';color: #fff;line-height: 1.6;letter-spacing: -0.3px;word-break: keep-all;}
.main-about-con ul.main-about-list li .txt_wrap a.viewDetail_btn {position: absolute; bottom: 115px;}
.main-about-con ul.main-about-list li .txt_wrap a.viewDetail_btn > strong {position: relative; font-size: 14px; font-family: 'Pretendard-SemiBold'; color: #fff;}

.main-about-con ul.main-about-list li .txt_wrap a.viewDetail_btn > strong:before {content:''; position: absolute; bottom: 3px; right: -31px; width: 24px; height: 1px; background: #fff;}




/* -------- 메인 컨텐츠 :: CONTACT -------- */
#mainContactCon {background-color: #f5f6f8;}
#mainContactCon .main-contact-con {margin: 0 -2.5%;}
#mainContactCon .main-contact-con > div {float: left;width: calc(100% / 2 - 5%);margin: 0 2.5%;}
#mainContactCon .main-contact-con div.imgBox {overflow: hidden;}
#mainContactCon .main-contact-con div.imgBox > img {width: 100%;transition: all .5s ease-in-out;}
#mainContactCon .main-contact-con .txt_wrap {margin-top: 30px;}
#mainContactCon .main-contact-con .txt_wrap strong {display: block;font-size: 42px;font-weight: 500;color: #000;}
#mainContactCon .main-contact-con .txt_wrap p {font-size: 18px;color: #666;letter-spacing: -0.2px;line-height: 1.6;margin: 30px auto 60px;word-break: keep-all;}
/* hover */
#mainContactCon .main-contact-con > div:hover div.imgBox > img {transform: scale(1.1);transition: all .5s ease-in-out;}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
#fp-nav{position: fixed;z-index: 100;top: calc(50% + 18px);right:60px; opacity: 1; -webkit-transform: translate3d(0,0,0);}
#fp-nav ul {position:relative; width:2px; height:98px; background-color: rgba(255,255,255,0.2);}
/*#fp-nav ul li {width: 10px; height:10px;margin-top:-28px; background: #000; border-radius: 50%;}*/
#fp-nav ul li:last-child { display:none;}
#fp-nav ul li a{display:block;width:100%;height: calc(98px / 4);border-radius: 50%;}
#fp-nav ul li a span{display:block; }
#fp-nav ul li .fp-tooltip{position:absolute; overflow:hidden; width:100px;top:-70px; left:-48px; transform:rotate(-90deg);opacity:0;filter:Alpha(opacity=0); line-height:20px; font-size:12px; color:rgba(255,255,255,0.8); font-weight:600;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s;}
#fp-nav ul li .num {position:absolute; width:20px; bottom:-30px; left:-10px; transform:rotate(-90deg);opacity:0;filter:Alpha(opacity=0); line-height:20px; font-size:13px; font-style:italic;color:rgba(255,255,255,0.5); font-weight:600;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s; }
#fp-nav ul li a.active { background-color: #fff;}
#fp-nav ul li a.active + .fp-tooltip , #fp-nav ul li .num.on  {opacity:1.0;filter:Alpha(opacity=100);}

/* Black Style */
#fp-nav.black ul {background-color: rgba(185,185,185,0.6);}
#fp-nav.black ul li a.active  {background-color:#111}
#fp-nav.black ul li .fp-tooltip {color:#111;}
#fp-nav.black ul li .num {color:rgba(17,17,17,0.5);}


@media all and (max-width:1700px){
	#fp-nav{display: none !important;}
}

/* ****************** 마우스 커서 ********************** */
.mousepointer { background: #fff;border:1px solid #ebebeb;z-index: 60000; position: fixed; top: 0; left: 0;transform: scale(0); pointer-events: none;font-size: 15px;font-weight: 500;font-style: italic;text-align: center;line-height: 1em; width: 55px;height: 55px;color: rgba(17,17,17,0.8);transition: transform 0.3s ease-in-out 0s;border-radius: 100%;}
.is-mobile .mousepointer{display:none;}
.mousepointer.active {transform: scale(1)}
.mousepointer .pointers { position: absolute; top: 0; left: 0;width: 100%;height: 100%}
.mousepointer p {position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);display: block;overflow: hidden}
.mousepointer p span {transition: opacity 0.3s ease-in-out 0s; margin-left:5px;opacity: 0; padding-left:5px; position:relative;  display: inline-block;}
.mousepointer p span:before {content:""; position:absolute; left:0; top:50%; margin-top:-5px; width:1px; height:10px; background-color:#000; opacity:0.5;filter:Alpha(opacity=50);}
.mousepointer p span:first-child {margin-left:0; padding-left:0;}
.mousepointer p span:first-child:before {display:none;}
.mousepointer p.active span {opacity: 1}
.detail-cusor-active {cursor:none;}




/* *******************************************************
 * 미디어쿼리 시작
******************************************************** */

/* ******************  메인 레이아웃 ********************** */
@media all and (max-width:1919px){
#mainAboutCon .area-box {max-width: 1400px;margin: 0 auto;}
}
@media (max-width: 1400px){
.main-area {width: 96%;}
.more_btn a:before {right: -56px;}
}
@media all and (min-width:1025px) and (max-height:600px) ,(max-height:600px){
.section:not(#mainVisual, #mainApplicationCon, #mainContactCon) .fp-tableCell{height:auto !important; padding:70px 0;}
#mainVisual{ height:550px!important}
.section:not(#mainVisual) .fp-tableCell .main-area{}
#mainFooter.section .fp-tableCell {padding:0;}
#mainContactCon .more-btn-box {margin:30px 0 0 auto; position:static;}
#mainApplicationCon .main-bs-wrap .main-bs-item .bs-thumb, .main-bs-control{ bottom:60px}
}
@media all and (max-width: 1023px){	
	.fp-section:not(#mainVisual) .fp-tableCell, .fp-section:not(#mainVisual) {display: block;height: 100% !important;}
}
@media (min-height: 561px) and (max-width: 1024px){	
	.full-section-wrap{height:calc(var(--vh, 1vh) * 100)}
}
@media all and (max-width: 767px){	
.main-area {padding-top: 80px;}
.more_btn a {font-size: 14px;}
}


/* ******************  메인 비주얼 ********************** */
@media all and (max-width:1750px){
    #mainVisual .area-box {padding:0 30px;}	
    /* 메인비주얼 :: 텍스트 */
    .main-video-txt .inner-box {max-width:none; padding-left: 70px;}
    /* 메인 비주얼 :: 페이징 */
    #mainVisual .main-visual-pagination {right:30px; left:auto;}
}
@media all and (max-width:1400px){
.main-visual-item .visual-img {background-position: center left !important;}
}
@media all and (max-width:1024px){
    #mainVisual .area-box {padding:0 15px;}
    /* 메인비주얼 :: 텍스트 */
    .main-visual-txt-con .txt-img img {height: 50px;}
    .main-visual-txt-con .main-visual-txt1 {font-size: 65px;}
    .main-visual-txt-con .main-visual-txt2 {font-size: 22px;}
    }
@media all and (max-width: 800px){
    /* 메인 비주얼 :: 페이지네이션 */
    #mainVisual .pagination {bottom: 50px;}
    /* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-con .main-visual-txt2 {font-size: 20px;margin-bottom: 20px;}
	.main-visual-txt-con .main-visual-txt2 .mb {display: block;}
    .main-visual-txt-con .main-visual-txt1 {font-size: 55px;}
    /* 메인 비주얼 :: 스크롤아이콘 */
    .main-scroll-icon {bottom:20px}	
}
@media all and (max-width: 580px) {
	.main-visual-item .visual-img {background-position: center right 80% !important;}
}
@media all and (max-width: 480px ){
    /* 메인 비주얼 :: 텍스트 */	
    .main-visual-txt-con .txt-img img{ height:28px}	
    .main-visual-txt-con .main-visual-txt1 {font-size: 45px;}
    .main-visual-txt-con .main-visual-txt2{font-size: 18px;}
    /* 메인 비주얼 :: 페이지네이션 */
    #mainVisual .swiper-pagination li a {width: 70px;}
}


/* ******************  메인 컨텐츠 (section01) ********************** */
@media all and (max-width: 1400px){	
#mainProductCon .main-product-con .con > div .txt_wrap p br {display: none;}	
}

@media all and (max-width: 1023px){		
.section .main-tit .main-title h4 {font-size: 18px;}
.section .main-tit .main-title h3, #mainContactCon .main-contact-con .txt_wrap strong {font-size: 32px;}
#mainProductCon .main-product-con .con > div .txt_wrap strong {font-size: 20px;}
#mainProductCon .main-product-con .con > div .txt_wrap p {font-size: 16px;}
}

@media all and (max-width: 767px){		
.section .main-tit .main-title h4 {font-size: 16px;}
.section .main-tit .main-title h3, #mainContactCon .main-contact-con .txt_wrap strong {font-size: 24px;}
#mainProductCon .main-product-con .con {margin: 50px -1% 0;}
#mainProductCon .main-product-con .con > div {width: calc(100% / 2 - 2%);margin: 0 1% 2%;}
#mainProductCon .main-product-con .con > div:last-child {margin: 0 1%;}
#mainProductCon .main-product-con .con > div .txt_wrap strong {font-size: 18px;}
}

@media all and (max-width: 479px){		
.section .main-tit .main-title h4 {font-size: 14px;}
.section .main-tit .main-title h3, #mainContactCon .main-contact-con .txt_wrap strong {font-size: 20px;line-height: 1.2;}
.section .main-tit .main-title h3 br {display: block;}	
#mainProductCon .main-product-con .con {margin: 50px auto 0;}
#mainProductCon .main-product-con .con > div {width: 100%;margin: 0 auto 40px;}
#mainProductCon .main-product-con .con > div:last-child {margin: 0;}
#mainProductCon .main-product-con .con > div .txt_wrap {margin-top: 20px;}
#mainProductCon .main-product-con .con div.imgBox > img {height: 180px;object-fit: cover;}
#mainProductCon .main-product-con .con > div .txt_wrap strong {margin-bottom: 10px;}
}
@media (min-width: 380px) and (max-width: 479px){		
#mainProductCon .main-product-con .con > div .txt_wrap p br {display: block;}
}


/* -------- 메인 컨텐츠 (section02) -------- */
@media all and (max-width: 1919px){
.main-about-con .main-about-tit p br {display: none;}
.main-about-con ul.main-about-list li a {padding: 19% 11%;}
}
@media all and (max-width: 1400px){
.main-about-con ul.main-about-list li .txt_wrap > strong {font-size: 24px;}
.main-about-con ul.main-about-list li .txt_wrap > strong br {display: none;}
}
@media (min-width: 768px) and (max-width: 1023px){
#mainAboutCon .more_btn {position: absolute;bottom: 0;right: 76px;}
}
@media (max-width: 1023px){
#mainAboutCon .area-box, #mainContactCon .main-area {padding: 100px 0;}
/**/
.main-about-con .main-about-tit {position: relative;width: 100%;padding-top: 0;margin-bottom: 80px;}
.main-about-con .main-about-tit p {width: 67%;margin: 30px 0 0;}
.main-about-con ul.main-about-list {width: calc(100% + 2%);max-height: 325px;}
.main-about-con ul.main-about-list li {height: 325px;}
.main-about-con ul.main-about-list li a {padding: 16% 8%;}
.main-about-con ul.main-about-list li img {display: block;width: 70px;}
.main-about-con ul.main-about-list li .txt_wrap > strong {padding: 30px 0 20px;}
.main-about-con ul.main-about-list li .txt_wrap p {font-size: 16px;}
}

@media (max-width: 767px){
#mainAboutCon .area-box, #mainContactCon .main-area {padding: 80px 0;}
#mainAboutCon.section .main-tit .main-title {text-align: center; line-height: 1.2}
/**/
#mainAboutCon .more_btn {text-align: right;padding-right: 70px;}
#mainAboutCon .more_btn a:before {right: -60px;}
.main-about-con .main-about-tit {margin-bottom: 50px;}
.main-about-con .main-about-tit p {width: 100%;margin: 30px auto;text-align: center;}
.main-about-con ul.main-about-list {width: calc(100% + 2%);max-height: 100%;}
.main-about-con ul.main-about-list li {width: calc(100% / 2 - 2%);height: 310px;margin: 0 1% 2%;}
.main-about-con ul.main-about-list li img {width: 55px;}
.main-about-con ul.main-about-list li .txt_wrap > strong {font-size: 20px;padding: 20px 0 10px;}
/* hover */
.main-about-con ul.main-about-list li:hover {border: 1px solid var(--main-color);background: #fff;-webkit-transform: translateY(-10%);transform: unset;-webkit-transition: all .5s ease-in-out;transition: all .5s ease-in-out;}	
.main-about-con ul.main-about-list li:hover img {filter: opacity(0.5) drop-shadow(0 0 var(--main-color));}
.main-about-con ul.main-about-list li:hover .txt_wrap, .main-about-con ul.main-about-list li:hover .txt_wrap p {color: var(--main-color);}
}

@media all and (max-width: 479px){
#mainAboutCon.section .main-tit .main-title {text-align: center; line-height: 1.2}
/**/
#mainAboutCon .more_btn {text-align: right;padding-right: 70px;}
#mainAboutCon .more_btn a {font-size: 14px;}
#mainAboutCon .more_btn a:before {right: -45px;}
.main-about-con .main-about-tit {margin-bottom: 50px;}
.main-about-con .main-about-tit p {font-size: 16px;width: 100%;margin: 30px auto;}
.main-about-con ul.main-about-list {width: 100%;max-height: 100%;margin: 0 auto;}
.main-about-con ul.main-about-list li {width: 100%;height: 245px;margin: 0 auto 20px;}
.main-about-con ul.main-about-list li:last-child {margin: 0;}
.main-about-con ul.main-about-list li a {padding: 10% 7%;}
.main-about-con ul.main-about-list li .txt_wrap > strong {font-size: 18px;}
}


/* -------- 메인 컨텐츠 :: CONTACT(section03) -------- */
@media all and (max-width: 1400px){	
#mainContactCon .main-contact-con {margin: 0 -1%;}
#mainContactCon .main-contact-con > div {width: calc(100% / 2 - 2%);margin: 0 1%;}
#mainContactCon .main-contact-con .txt_wrap p br {display: none;}
}
@media all and (max-width: 1023px){
.more_btn.flex {display: inline-flex;flex-direction: column;justify-content: space-between;}
.more_btn.flex a:nth-child(2) {margin: 20px 0 0;}
/**/
#mainContactCon .main-contact-con div.imgBox > img {height: 325px;object-fit: cover;}
#mainContactCon .main-contact-con .txt_wrap p {font-size: 16px;margin: 30px auto 40px;}
}

@media all and (max-width: 767px){
.more_btn.flex {flex-direction: column;justify-content: space-between;}
.more_btn.flex a:nth-child(2) {margin: 20px 0 0;}
/**/
#mainContactCon .main-contact-con div.imgBox > img {height: 207px;}
#mainContactCon .main-contact-con .txt_wrap p {margin: 20px auto 30px;}
}
@media all and (max-width: 479px){
#mainContactCon .main-contact-con {margin: 0 auto;}
#mainContactCon .main-contact-con > div {width: 100%;margin: 0 auto 40px;}
#mainContactCon .main-contact-con div.imgBox > img {height: 180px;}
#mainContactCon .main-contact-con .txt_wrap {margin-top: 20px;}
#mainContactCon .main-contact-con .txt_wrap p {margin: 10px auto 30px;}
}


/* ******************  Fade In 효과 ********************* */
/******** Animation *********/
@media all and (min-width:801px){
/* 서브 공통 :: 스크롤효과 */
.fade-in{opacity:0;filter:Alpha(opacity=0); }
.fade-in-left{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px);}
.fade-in-right{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateX(50px); -moz-transform: translateX(50px); -ms-transform: translateX(50px); -o-transform: translateX(50px); transform: translateX(50px);}
.fade-in-up{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(50px); -moz-transform: translateY(50px); -ms-transform: translateY(50px); -o-transform: translateY(50px); transform: translateY(50px);}
.fade-in-up20{opacity:0;filter:Alpha(opacity=0); -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%);}
.active-section .fade-in{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transition: all 1.0s ease;transition: opacity 1.0s ease;}
.active-section .fade-in-left{opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); -webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.active-section .fade-in-right{ opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.active-section .fade-in-up{opacity:1.0;filter:Alpha(opacity=100); -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);-webkit-transition: all 1.0s ease; transition: opacity 1.0s ease, transform 1.0s ease;}
.active-section .fade-in-up20{ opacity:1.0;filter:Alpha(opacity=100);-webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px);-webkit-transition: all 1.0s ease;transition: opacity 1.0s ease, transform 1.0s ease;}
.fade-in-02{-webkit-transition-delay:0.2s !important; transition-delay:0.2s !important }
.fade-in-03{-webkit-transition-delay:0.3s !important; transition-delay:0.3s !important }
.fade-in-04{-webkit-transition-delay:0.4s !important; transition-delay:0.4s !important }
.fade-in-05{-webkit-transition-delay:0.5s !important; transition-delay:0.5s !important }
.fade-in-06{-webkit-transition-delay:0.6s !important; transition-delay:0.6s !important }
.fade-in-07{-webkit-transition-delay:0.7s !important; transition-delay:0.7s !important }
.fade-in-08{-webkit-transition-delay:0.8s !important; transition-delay:0.8s !important }
.fade-in-09{-webkit-transition-delay:0.9s !important; transition-delay:0.9s !important }
.fade-in-10{-webkit-transition-delay:1s !important; transition-delay:1s !important }
}

/* ******************  메인 오른쪽 퀵메뉴 (Fullpage) ********************** */
@media all and (max-width:1700px){
	#fp-nav {display: none;}
}