@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2021-09-02
******************************************************** */
.main-area {max-width: 1560px; margin: 0px auto; padding-top: 82px;}
.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:96px; color:#fff; letter-spacing:-0.75px; margin-top: 10px; font-family: 'Pretendard-Bold';}
.main-visual-txt-con .main-visual-txt1 b{font-weight:700; color:#fff}
.main-visual-txt-con .main-visual-txt2{font-weight:400; font-size:24px; letter-spacing:-0.75px; color:#fff; line-height:1.3;  margin-top: 46px;}

/* 메인 비주얼 :: 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 .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;}


/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 화살표 */
.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);}
}

/* -------- 메인 컨텐츠 :: 제품소개 -------- */
section#mainProductCon {position: relative;}
section#mainProductCon:before {content:''; position: absolute; bottom: 0; left: 0; background: #f5f6f8; width: 100%; height: 44%}
section#mainProductCon .swiper-slide img {width: 100%;}
.main-product-con {position:relative; text-align: center; }
.main-product-con h3 {font-size: 42px; color:#111; text-align:center; font-family: 'Pretendard-SemiBold';}
.main-product-con a.viewmore_btn {position: relative; font-size: 14px; font-family: 'Pretendard-SemiBold'; color: #000; display: inline-block; margin: 3% 0 3.5%; padding-right: 70px;}
.main-product-con a.viewmore_btn:before {content:''; position: absolute; right: 0; top: -5px; background: url(/img/cm_style_arrow.png)no-repeat; width: 47px; height: 25px; transition: transform .3s}
.main-product-con a.viewmore_btn:hover:before {transform: translateX(10px)}
.main-product-con .product-slide {overflow: hidden;}
.main-product-con .product-slide .swiper-slide a {display: block;}
.main-product-con .product-slide .swiper-slide a img {z-index: 1}
.main-product-con .product-slide .swiper-slide a:hover .txt_wrap {background: #04367b; }
.main-product-con .product-slide .swiper-slide a:hover .txt_wrap span, .main-product-con .product-slide .swiper-slide a:hover .txt_wrap p {color: #fff;}
.main-product-con .product-slide .txt_wrap {font-family: 'Pretendard-SemiBold'; padding: 10% 0;}
.main-product-con .product-slide .txt_wrap span {font-size: 16px; color: #777;}
.main-product-con .product-slide .txt_wrap p {font-size: 22px; color: #222; font-family: 'Pretendard-Medium'; margin-top: 19px}
/* 이전,다음버튼,페이지네이션 */
.main-product-con .swiper-button-prev, .main-product-con .swiper-button-next {width: 70px; height: 70px; border-radius: 100%; box-shadow: 3px 3px 12px 3px rgba(0,0,0,0.5); background: #fff; z-index: 999; transform: translateY(-50%);}
.main-product-con .swiper-button-prev {left: -35px}
.main-product-con .swiper-button-next {right:-35px;}
.main-product-con .swiper-button-prev:after, .main-product-con .swiper-button-next:after {display: none;}
.main-product-con .swiper-button-prev i, .main-product-con .swiper-button-next i {font-size: 30px; font-weight: bold; color: #555;}
.main-product-con .swiper-pagination-fraction, .main-product-con .swiper-pagination-custom, .main-product-con .swiper-container-horizontal > .swiper-pagination-bullets {bottom: -74px; }
.main-product-con .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 0;}
.main-product-con .swiper-pagination-bullet {width: 30px; height: 4px; border-radius: 0;}
.main-product-con .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet-active {width: 80px; height: 8px; margin-bottom: -2px; display: inline-block;}


/* -------- 메인 컨텐츠 :: ABOUT US -------- */
#mainAboutCon .area-box {max-width:1800px; margin-right: 0;}
.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 {margin-top: 165px; float: left; width: 32%;}
.main-about-con .main-about-tit h3 {font-size: 18px; color: #04367b; font-family: 'Pretendard-Bold';}
.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; font-family: 'Pretendard-Medium'; line-height: 1.6; margin-bottom: 55px;}
.main-about-con .main-about-tit .main-about-btn {}
.main-about-con .main-about-tit .main-about-btn a {position: relative; font-size: 15px; color: #222; font-family: 'Pretendard-Medium';}
.main-about-con .main-about-tit .main-about-btn a:before {content:''; position: absolute; top: -15px; right: -96px; background: url(/img/cm_style_arrow_g.png)no-repeat; width: 66px; height: 49px;}
.main-about-con .main-about-tit .main-about-btn a:hover:before {transform: translateX(10px)}
.main-about-con ul.main-about-list {float: right; width: 68%; max-height: 555px; margin-top: 100px;}
.main-about-con ul.main-about-list li {float: left; width: 31%; height: 555px; margin-left: 2%; padding: 8% 5% 0 5%; box-sizing: border-box; box-shadow: -2px 2px 13px -4px rgba(0,0,0,0.3);}
.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: #04367b;}
.main-about-con ul.main-about-list li:nth-child(2) {background: #4e4e4e;}
.main-about-con ul.main-about-list li img {max-width: 42px; width: 100%;}
.main-about-con ul.main-about-list li .txt_wrap {color: #fff;}
.main-about-con ul.main-about-list li.white .txt_wrap {color: #333;}
.main-about-con ul.main-about-list li .txt_wrap > strong {display: block; font-size: 30px; font-family: 'Pretendard-Medium'; padding: 38px 0 17px; font-weight: unset;}
.main-about-con ul.main-about-list li .txt_wrap p {font-size: 17px; font-family: 'Pretendard-ExtraLight'; color: #c5c5c5; line-height: 1.4; letter-spacing: -0.3px; word-break: keep-all;}
.main-about-con ul.main-about-list li .txt_wrap a.viewDetail_btn {position: absolute; bottom: 125px;}
.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.white .txt_wrap a.viewDetail_btn > strong:before {content:''; position: absolute; bottom: 3px; right: -31px; width: 24px; height: 1px; background: #333;}
.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;}
.main-about-con ul.main-about-list li.white .txt_wrap a.viewDetail_btn > strong {color: #333;}



/* -------- 메인 컨텐츠 :: CONTACT -------- */
#mainContactCon {background-color: #f5f6f8;}
.main-contact-con .left-con {float: left; width: 47%; margin-right: 3%;}
.main-contact-con div.imgBox >  img {width: 100%;}
.main-contact-con .right-con {float: left; width: 47%; margin-left: 3%;}
.main-contact-con .txt_wrap {}
.main-contact-con .txt_wrap strong {display: block; margin: 5% 0 3%; font-size: 42px; color: #171a1e; font-family: 'Pretendard-Bold';}
.main-contact-con .txt_wrap p {font-size: 18px; color: #6b6b6b; letter-spacing: -0.2px; line-height: 1.6; padding-right: 21%; word-break: keep-all;}
.main-contact-con .txt_wrap a.arrow_gray {position: relative; display: inline-block; margin-top: 53px; color: #111; font-size: 14px; }
.main-contact-con .txt_wrap a.arrow_gray:before  {width: 34px; height: 25px; background-size: 100%; }
.main-contact-con .txt_wrap a.arrow_gray:after  {content:''; position: absolute; bottom: -25px; left: 0; width: 180px; height: 2px; background: #171a1e;}



/* ******************  메인 오른쪽 퀵메뉴 (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:10px; 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);}


/* ****************** 마우스 커서 ********************** */
.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:1580px){
    .main-area {padding:82px 30px 0 30px;}
}
@media all and (max-width:1024px){
    .main-area {padding:82px 45px 0 45px;}
}
@media all and (min-width:1025px) and  (max-height:800px) {
    .main-area {padding-top:0}
}
@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 (min-height: 561px) and (max-width: 1024px){	
	.full-section-wrap{height:calc(var(--vh, 1vh) * 100)}
}


/* ******************  메인 비주얼 ********************** */
@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: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: 80px;}
    .main-visual-txt-con .main-visual-txt2 {margin-top: 36px;}
    }
@media all and (max-width: 800px){
    /* 메인 비주얼 :: 페이지네이션 */
    #mainVisual .pagination {bottom: 50px;}
    /* 메인 비주얼 :: 텍스트 */
    .main-visual-txt-con .main-visual-txt1 {font-size: 67px}
    /* 메인 비주얼 :: 스크롤아이콘 */
    .main-scroll-icon {bottom:20px}	
}
@media all and (max-width: 540px) {
    /* 메인 비주얼 :: 텍스트 */
    .main-visual-txt-con .main-visual-txt1{font-size:60px}
    .main-visual-txt-con .main-visual-txt2 {font-size: 21px; margin-top: 37px;}
}
@media all and (max-width: 480px ){
    /* 메인 비주얼 :: 텍스트 */	
    .main-visual-txt-con .txt-img img{ height:28px}	
    .main-visual-txt-con .main-visual-txt1 {font-size: 38px;}
    .main-visual-txt-con .main-visual-txt2{ font-size: 17px;}
    /* 메인 비주얼 :: 페이지네이션 */
    #mainVisual .swiper-pagination li a {width: 70px;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 제품소개(section01) -------- */
@media all and (max-width: 1440px){		
    .main-product-con h3 {font-size: 37px;}
    .main-product-con .swiper-pagination-fraction, .main-product-con .swiper-pagination-custom, .main-product-con .swiper-container-horizontal > .swiper-pagination-bullets {bottom: -48px;}
}
@media all and (max-width: 1270px){		
    .main-product-con .swiper-pagination-fraction, .main-product-con .swiper-pagination-custom, .main-product-con .swiper-container-horizontal > .swiper-pagination-bullets {display: none;}
}
@media all and (max-width: 1100px){		
    /* 타이틀 */
    .main-product-con h3 {font-size: 32px;}
}
@media all and (max-width: 960px){	
    /* 타이틀 */
    .main-product-con h3 {font-size: 28px;}
    .main-product-con .product-slide .txt_wrap span {font-size: 15px;}
    .main-product-con .product-slide .txt_wrap p {font-size: 20px; margin-top: 13px}
}
@media all and (max-width: 830px){	
    /* 타이틀 */
    .main-product-con h3 {font-size: 24px;}
    .main-product-con .product-slide .txt_wrap span {font-size: 14px;}
    .main-product-con .product-slide .txt_wrap p {font-size: 18px;}
    .main-product-con .swiper-button-prev, .main-product-con .swiper-button-next {width: 50px;height: 50px;}
}
@media all and (max-width: 768px){		
    .main-product-con h3 {font-size: 26px; text-align: center; word-break: keep-all; line-height: 1.3; padding-bottom: 5%;}
    .main-product-con .product-slide .txt_wrap span {font-size: 15px;}
    .main-product-con .product-slide .txt_wrap p {font-size: 19px;}
     a.viewmore_btn.m_view {display: inline-block;}
     a.viewmore_btn.p_view {display: none;}
}
@media all and  (max-width: 480px){	
    .main-area {padding: 50px 45px 0 45px}
    .main-product-con h3 {font-size: 22px; padding-bottom: 6%;}
    .main-product-con .product-slide .txt_wrap {padding: 6% 0px;}
    .main-product-con .product-slide .swiper-slide a .txt_wrap {background: #04367b;}
    .main-product-con .product-slide .txt_wrap span,.main-product-con .product-slide .txt_wrap p {color: #fff;}
    .main-product-con a.viewmore_btn {display: none;}
    .main-product-con .swiper-button-prev, .main-product-con .swiper-button-next {top: 58%;}
}
@media all and  (max-width: 375px){	
    .main-product-con h3 {font-size: 20px; }
    .main-product-con .product-slide .txt_wrap {padding: 6%;}
}

@media (max-height: 560px) and (min-width: 801px){	
    #fullpage #mainProductCon{height:610px !important;}
}
@media (max-height: 560px) and (max-width: 800px){	
    #fullpage #mainProductCon{height:500px !important;}
}



/* -------- 메인 컨텐츠 :: ABOUTUS(section02) -------- */
@media all and (max-width: 1350px){		
    .main-about-con .main-about-tit strong {font-size: 35px; margin: 28px 0 34px;}
    .main-about-con .main-about-tit p {margin-bottom: 56px;}
    .main-about-con ul.main-about-list li {padding: 8% 4% 0 4%;}
}
@media all and (max-width: 1300px) {
    .main-about-con ul.main-about-list li {position: relative; float: none; width: 100%; height: 170px; padding: 2%; margin-bottom: 2%;}
    .main-about-con ul.main-about-list li .txt_wrap > strong {font-size: 20px; padding: 8px 0 19px;}
    .main-about-con ul.main-about-list li .txt_wrap a.viewDetail_btn {position: absolute; top: 17%; right: 6%;}    
}
@media all and (max-width: 1024px) {
    .main-about-con {height: 100%;}
    .main-about-con .main-about-tit {float: none; width: 100%; text-align: center; margin: 82px 0 20px;}
    .main-about-con .main-about-tit strong {font-size: 32px; margin: 7px 0;}
    .main-about-con .main-about-tit p {margin-bottom: 0;}
    .main-about-con .main-about-tit strong br,  .main-about-con .main-about-tit p br {display: none;}
    .main-about-con ul.main-about-list {float: none; width: 100%; margin-top: 0;}
    .main-about-con ul.main-about-list li {margin-left: 0;  margin-bottom: 10px; height: 135px; }
    .main-about-con ul.main-about-list li img {float: left; margin-top: 23px; max-width: 100%; width: auto;}
    .main-about-con ul.main-about-list li .txt_wrap {float: right; width: 89%;}
    .main-about-btn {display: none;}
}
@media all and (max-width: 768px) {
    .main-about-con .main-about-tit {top: 147px;}
    .main-about-con .main-about-tit h3 {font-size: 21px;}    
    .main-about-con .main-about-tit strong {font-size: 30px; margin: 18px 0;}    
    .main-about-con .main-about-tit p {font-size: 16px;}
    .main-about-con ul.main-about-list {bottom: 11%; }
    .main-about-con ul.main-about-list li img {display: none;}
    .main-about-con ul.main-about-list li {height: 133px;}
    .main-about-con ul.main-about-list li .txt_wrap {float: none; width: 100%;}
    .main-about-con ul.main-about-list li .txt_wrap > strong {padding: 8px 0;}
} 
@media all and (max-width: 540px) {
    .main-about-con .main-about-tit h3 {font-size: 18px;}
    .main-about-con .main-about-tit strong {font-size: 24px; margin: 8px 0;}
    .main-about-con .main-about-tit p {font-size: 14px; line-height: 1.4}
    .main-about-con ul.main-about-list li {height: 132px; margin-bottom: 22px; padding: 4%;}
    .main-about-con ul.main-about-list li .txt_wrap > strong {font-size: 16px; padding: 5px 0 9px;}
    .main-about-con ul.main-about-list li .txt_wrap p {font-size: 15px;}
    .main-about-con ul.main-about-list li .txt_wrap a.viewDetail_btn {top: 20%; right: 12%;}
}
@media all and (max-width: 480px){
    .main-about-con ul.main-about-list li {height: 145px;}
    .main-about-con ul.main-about-list li .txt_wrap a.viewDetail_btn {top: 15%;}
}
@media all and (max-width: 375px) {
    .main-about-con .main-about-tit strong {font-size: 21px;}
    .main-about-con ul.main-about-list li .txt_wrap p {font-size: 14px; margin-top: 7px;}
}




/* -------- 메인 컨텐츠 :: CONTACT(section03) -------- */
@media all and (max-width: 1024px) {
    #mainContactCon .main-area {padding: 82px 15px 0 15px;}
    .main-contact-con .txt_wrap p {padding-right: 0;}
}
@media all and (max-width: 910px)  {
    .main-contact-con .txt_wrap strong {font-size: 38px;}
    .main-contact-con .txt_wrap p {font-size: 17px;}
}
@media all and (max-width: 768px) {
    .main-contact-con .imgBox {height: 300px; overflow: hidden; margin: 2% 0;}
    .main-contact-con div.imgBox > img {filter: brightness(0.6);}
    .main-contact-con .left-con  {position: relative; float: none; width: 100%; margin-right: 0;}
    .main-contact-con .right-con {position: relative; float: none; width: 100%; margin-left: 0;}
    .main-contact-con .txt_wrap {position: absolute; top: 0; left: 0; padding: 3%;}
    .main-contact-con .txt_wrap strong {font-size: 35px; color: #fff;}
    .main-contact-con .txt_wrap p {color: #d8d8d8;}
    .main-contact-con .txt_wrap a.arrow_gray {color: #fff;}
    .main-contact-con .txt_wrap a.arrow_gray:after {background: #fff;}
}
@media all and (max-width: 540px) {
    .main-contact-con .imgBox {height: 270px}
    .main-contact-con div.imgBox > img {width: auto;}
    .main-contact-con .txt_wrap {position: absolute; top: 0; left: 0; padding: 3%;}
    .main-contact-con .txt_wrap strong {font-size: 26px}
    .main-contact-con .txt_wrap p {font-size: 16px;}
    .main-contact-con .txt_wrap a.arrow_gray {margin-top: 29px;}
}
@media all and (max-width: 480px)  {
    .main-contact-con .imgBox {height: 285px;}
    #mainContactCon .main-area {padding: 50px 15px 0 15px;} 
    .main-contact-con .txt_wrap {text-align: center;}
    .main-contact-con .txt_wrap strong {font-size: 24px;}
    .main-contact-con .txt_wrap a.arrow_gray {padding-right: 30px;}
    .main-contact-con .txt_wrap a.arrow_gray:after {left: 50%; transform: translateX(-50%)}
    .main-contact-con .txt_wrap a.arrow_gray:before {right: -8px;}
}

/* ******************  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 !important;}
}