@charset "utf-8";
/* ****************** 메인 loading ********************** */
.ms-preloader{width: 100%; height: 100%; position: fixed; z-index: 9999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000;}
.main-scroll-cover{width: 100%; height: 100vh; position: absolute; z-index: 99999999; top: 0; left: 0; opacity: 1; visibility: visible; background-color: transparent;}

.main-wrap .nav-open-btn-box,
.main-wrap #headerInnerWrap {margin-top: calc(-1 * var(--header-height)); opacity: 0; transition: top 0.4s ease-in-out, margin-top ease-in-out 1.1s, opacity ease-in-out 0.5s, background-color 0.4s ease-in-out, transform 0.4s ease-in-out;}
.main-wrap .header-lang03-mo{margin-top: calc(-1 * var(--header-height)); opacity: 0; transition: top 0.4s ease-in-out, margin-top ease-in-out 1.1s, opacity ease-in-out 0.5s, background-color 0.4s ease-in-out, transform 0.4s ease-in-out;}

#mainVisualControls,
.scroll-down-wrap{margin-bottom: -5rem; opacity: 0; transition: margin-bottom ease-in-out 1.1s, opacity ease-in-out 0.5s;}

.main-wrap.index-active #headerInnerWrap,
.main-wrap.index-active .nav-open-btn-box,
.main-wrap.index-active .header-lang03-mo {margin-top:0; opacity:1;}
.main-wrap.index-active #mainVisualControls,
.main-wrap.index-active .scroll-down-wrap{margin-bottom:0; opacity:1;}


@media all and ( min-width: 801px ){
	.main-wrap #cmProductInquiryBox{transform: translateX(6rem); opacity: 0; transition: transform ease-in-out 1.1s, opacity ease-in-out 0.5s, right 0.8s ease-in-out;}
	.main-wrap.index-active #cmProductInquiryBox{transform: translateX(0); opacity: 1;}
}
@media all and ( min-width: 1281px ){
	/* -------- Header :: fixed -------- */
	#header.hidden{top:0;}
	#header.hidden #headerInnerWrap{top: 0; background-color:#fff; border-bottom:1px solid #eee;}
	#header.hidden .nav-open-btn-box{top: 0;}
	#header.hidden .cm-logo-svg .cls-2{fill:#2f367e;}
	#header.hidden .cm-logo-svg .cls-4{fill:#76a0c7;}
	#header.hidden .cm-logo-svg .cls-5{fill:#2561ae;}
	#header.hidden #gnb > ul > li > a{color: #000; font-weight: 700;}
	#header.hidden #gnb > ul > li.selected > a{color: #fff;}
	#header.hidden .nav-open-btn{top:0;}
	#header.hidden .sitemap-line-btn .line,
	#header.hidden .nav-open-btn .line{background-color:#333}

	/* -------- Header :: hidden -------- */
	#header.hidden.scroll-up .nav-open-btn-box{transform: translateY(0);}
	#header.hidden.scroll-up #headerInnerWrap{transform: translateY(0);}
	#header.hidden.scroll-down .nav-open-btn-box{transform: translateY(calc(-1 * (var(--header-height) + 1px)));}
	#header.hidden.scroll-down #headerInnerWrap{transform: translateY(calc(-1 * (var(--header-height) + 1px)));}
}

@media all and ( max-width: 1280px ){
	.main-wrap #headerInnerWrap{position: fixed; top: var(--header-top);}
}


/* ******************  메인 비주얼 ********************** */
#mainVisual{overflow:hidden; width:100%; height:90vh; position:relative; background-color:#000;}
/* .main-visual-container{position:fixed; top:0; left:0; width:100%; height:100%;} */
.main-visual-item{position:relative; height:90vh;}
.main-visual-con{z-index:1;}
/* 메인 비주얼 :: 이미지 */
.main-visual-container,
.main-visual-swiper{position:relative; z-index:auto; width: 100%; height:90vh !important;}
.main-visual-container .swiper-slide {
	overflow: hidden;
	background-color:#333;
}
.main-visual-container .slide-inner {
	width: 100%;
	height: 90vh;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
	background-size: cover !important;
	background-position: center;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
	background-color: #000;
}
.main-visual-item .main-visual-img{
    display:block;
    width:100%;
    height:90vh;
    background-size:cover !important;
}
.main-visual-con video{
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.main-visual-con #player{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.main-visual-con iframe{
width: 100vw;
height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ 
min-height: calc(90vh + 340px); 
min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ 
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events:none;}

/* -------- 메인비주얼 :: 컨트롤러 -------- */
#mainVisualControls{position:absolute; bottom:85px; bottom: 5%; left:0; width:100%; z-index:2;}
#mainVisualControls .area-box{}
/* 컨트롤러 :: 진행바 */
#mainVisualControls .main-visual-pagination.swiper-pagination{margin: 0 1rem; display: inline-block; vertical-align: middle; width:auto; position: static;}
#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {display: inline-block; vertical-align: middle; position:relative; width:70px; height:auto; background:none; margin-left:10px; opacity:1;filter:Alpha(opacity=100); border-radius:0;}
#mainVisualControls .main-visual-pagination button:first-child {margin-left:0;}
#mainVisualControls .main-visual-pagination .progress-bar {display:block;position:absolute; bottom:0; left:0; display:block; width:100%; height:4px; background-color: rgba(0,0,0,0.3); box-sizing: border-box;}
#mainVisualControls .main-visual-pagination .swiper-pagination-bullet-active .progress-bar{background-color: rgba(0,0,0,0.1);}
#mainVisualControls .main-visual-pagination .progress-bar .bar{display:block; position:absolute; left:0; bottom:0; width:0; height:4px; background-color: #183259;}
/* 컨트롤러 :: 이전,다음 */
#mainVisualControls .main-visual-arrow{display: inline-block; vertical-align: middle; position:relative;}
#mainVisualControls .main-visual-arrow > button{margin: 0 3px; display: inline-block; vertical-align: middle; position: static; color:#183259; text-align:center; width: 20px; height: 30px; background: none;}
#mainVisualControls .main-visual-arrow > button:after{display: none;}
#mainVisualControls .main-visual-arrow > button i{font-size: 18px; line-height: 28px;}
#mainVisualControls .main-visual-arrow > button:not(.main-pause-btn) i{font-size: 20px;}
#mainVisualControls .main-visual-arrow .main-prev-btn i{text-indent: -2px;}
#mainVisualControls .main-visual-arrow .main-next-btn i{text-indent: 2px;}
#mainVisualControls .main-visual-arrow .main-play-btn{display: none;}
#mainVisualControls .main-visual-arrow .main-play-btn i{text-indent: 2px;}

/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative;}
.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-item .main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
}
.main-visual-item .main-visual-txt-box{
	display:flex;
	align-items:center;
	height:100%;
}
.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:6rem; line-height: 1.3; font-weight: 700; letter-spacing: -0.001em; color: #0e2666; padding-bottom: 1.5rem;}
.main-visual-item .main-visual-txt-con .main-visual-txt2{ font-size:2rem; line-height: 1.6; font-weight: 400; letter-spacing: -0.065em; color:#000;}
.main-visual-item .main-visual-txt-con .main-visual-txt3{ font-size:3rem; line-height: 1.47; font-weight: 500; letter-spacing: -0.062em; color:#222222;}

/* 메인 비주얼 :: active효과 */
.main-visual-item.swiper-slide-active .main-visual-pc-img{
    -webkit-transform: scale(1.0,1.0) rotate(0.002deg);
     transform: scale(1.0,1.0) rotate(0.002deg);
}


.main-visual-more-btn-wrap{overflow:hidden; position: relative; margin-top: 3rem;}
.main-visual-more-btn{position: relative; display:inline-flex; justify-content:space-between; align-items:center; font-size:1.7rem; color:#fff;background:var(--main-color); padding:0rem 2.5rem; min-width:23.6rem; height:6rem; border-radius:1rem; box-sizing:border-box; overflow:hidden; transition:var(--transition-custom); font-weight:600; }
.main-visual-more-btn:hover{color:#fff; background:var(--main-color)}
/* 메인 비주얼 :: 텍스트 :: active효과 */



/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
.scroll-down-wrap{position: fixed; bottom: 5%; left: 50%; margin-left: 63rem; width: 14rem; display: flex; align-items: center; justify-content: flex-end; z-index: 1;}
.scroll-down-wrap.index-t-ver{position: absolute;}
.scroll-down-wrap .txt{font-size:1.2rem; letter-spacing:-0.05rem; color:#222; margin-right:1.5rem; transition:var(--transition-custom);}
.scroll-down-wrap .scroll-icon{position: relative; width:0.4rem; height:4rem; background:rgba(0,0,0,0.1); transition:var(--transition-custom); overflow:hidden;}
.scroll-down-wrap .scroll-icon span{position: absolute; display: block; width:0.4rem; height:0.4rem; background:#222; top:0.3rem; left:50%; transform:translateX(-50%); animation: scroll-icon-ani 2s ease-in-out infinite; transition:var(--transition-custom);}

.scroll-down-wrap .scroll-txt{display:inline-block; color:#222; font-weight:700;}
.scroll-down-wrap .scroll-txt em{font-size:1em; display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; font-weight:500;}
.scroll-down-wrap .scroll-txt em:nth-child(1){animation-delay:1s;}
.scroll-down-wrap .scroll-txt em:nth-child(2){animation-delay:1.04s;}
.scroll-down-wrap .scroll-txt em:nth-child(3){animation-delay:1.08s;}
.scroll-down-wrap .scroll-txt em:nth-child(4){animation-delay:1.12s;}
.scroll-down-wrap .scroll-txt em:nth-child(5){animation-delay:1.16s;}
.scroll-down-wrap .scroll-txt em:nth-child(6){animation-delay:1.2s;}
.scroll-down-wrap .scroll-txt em:nth-child(7){animation-delay:1.24s;}
.scroll-down-wrap .scroll-txt em:nth-child(8){animation-delay:1.28s;}
.scroll-down-wrap .scroll-txt em:nth-child(9){animation-delay:1.32s;}
.scroll-down-wrap .scroll-txt em:nth-child(10){animation-delay:1.36s;}
.scroll-down-wrap .scroll-txt em:nth-child(11){animation-delay:1.4s;}

@keyframes scroll-icon-ani {
	0% {
		top:-1rem;
		opacity:0;
	}
	10% {
		top:-1rem;
		opacity:1;
	}
	32% {
		top:-1rem;
		opacity:1;
	}
	80% {
		top:4.3rem;
		opacity:1;
	}
	100% {
		top:4.3rem;
		opacity:0;
	}
}

@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    20%,80% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

    100% {
        opacity: 0;
        transform: translateY(50%) rotateX(-90deg)
    }
}

@media all and (max-width:1600px){
	/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
	.scroll-down-wrap{right: var(--area-padding); left: auto; margin-left: 0;}
}
@media all and ( max-width: 800px ){
	.main-visual-item .main-visual-pc-img {display:none;}
	.main-visual-item .main-visual-m-img{display:block; }
	#mainVisual{height:100vh;}
	.main-visual-item{position:relative; height:100vh;}
	.main-visual-container, .main-visual-swiper{height:100vh !important;}
	.main-visual-container .slide-inner {height: 100vh;}
	.main-visual-item .main-visual-img{height:100vh;}
	.main-visual-con iframe{min-height: calc(100vh + 340px);}
	
	
	/* -------- 메인비주얼 :: 컨트롤러 -------- */
	#mainVisualControls{bottom:4rem; text-align: center;}
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination.swiper-pagination{margin: 0 1rem;}
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:70px; margin-left:10px;}
	#mainVisualControls .main-visual-pagination .progress-bar {height:4px;}
	#mainVisualControls .main-visual-pagination .progress-bar .bar{height:4px;}
	/* 컨트롤러 :: 이전,다음 */
	#mainVisualControls .main-visual-arrow > button{margin: 0 3px; width: 20px; height: 30px;}
	#mainVisualControls .main-visual-arrow > button i{font-size: 18px; line-height: 28px;}
	#mainVisualControls .main-visual-arrow > button:not(.main-pause-btn) i{font-size: 20px;}
	#mainVisualControls .main-visual-arrow .main-prev-btn i{text-indent: -2px;}
	#mainVisualControls .main-visual-arrow .main-next-btn i{text-indent: 2px;}
	#mainVisualControls .main-visual-arrow .main-play-btn i{text-indent: 2px;}

	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-inner{padding-bottom: 34rem;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:5.0rem; line-height: 0.9;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{ font-size:1.7rem; line-height: 1.5; }
	.main-visual-item .main-visual-txt-con .main-visual-txt3{ font-size:2.4rem; line-height: 1.3;}

	/* -------- 메인비주얼 :: 스크롤 아이콘 -------- */
	.scroll-down-wrap{position: absolute; bottom:0; right:0; width: 100%; display: flex; align-items: center; justify-content: center;}
	.scroll-down-wrap .txt{font-size:1.2rem; margin-right:1.5rem;;}
	.scroll-down-wrap .scroll-icon{width:0.4rem; height:3rem;}
	.scroll-down-wrap .scroll-icon span{width:0.4rem; height:0.4rem; top:0.3rem;}
}
@media all and ( max-width: 640px ){
.main-visual-txt-inner{padding-bottom: 40rem;}
}
@media all and ( max-width: 480px ){
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:65px; margin-left:8px;}
	.main-visual-item .main-visual-txt-con .main-visual-txt1{font-size:3.6rem; line-height: 1.0;}
	.main-visual-item .main-visual-txt-con .main-visual-txt2{ font-size:1.5rem; }
	.main-visual-item .main-visual-txt-con .main-visual-txt2 br { display: none;}
	.main-visual-item .main-visual-txt-con .main-visual-txt3{ font-size:2rem; }
	.main-visual-txt-inner{padding-bottom: 33rem;}
	.main-visual-more-btn-wrap{ margin-top: 2rem;}
	.main-visual-more-btn{ font-size:1.6rem; padding:0rem 2.0rem; min-width:18rem; height:4.8rem; border-radius:0.5rem; }
}
@media all and ( max-width: 359px ){
	/* 컨트롤러 :: 진행바 */
	#mainVisualControls .main-visual-pagination button.swiper-pagination-bullet {width:60px;}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
.main-tit-box .main-tit{color:#222; font-size:4.5rem; font-weight:700; letter-spacing:-0.02em}
.main-tit-box .main-sub-tit{font-weight:400; font-size:1.8rem; letter-spacing:-0.041em; color:#666; line-height:1.83; margin-top:1rem}
@media all and ( max-width: 1360px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:4.0rem;}
	.main-tit-box .main-sub-tit{font-size:1.6rem;}
}
@media all and ( max-width: 1024px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:3.5rem;}
}
@media all and ( max-width: 480px ){
	/* 공통 :: 타이틀 */
	.main-tit-box .main-tit{font-size:3rem;}
	.main-tit-box .main-sub-tit{font-size:1.5rem;}
}

/******************* 메인컨텐츠 1**********************/
#mainBanner{padding:9rem 0; }
.main-visual-cate-list{margin: 0 -1rem; display: flex; flex-wrap:wrap;}
.main-visual-cate-list li:nth-child(1) {background-color: #f0f3f8;}
.main-visual-cate-list li:nth-child(2) {background-color: #f1f1f1;}
.cate-img img { margin-top: 1rem;}
.main-visual-cate-item{margin: 0 1rem; width: calc(50% - 2rem); height: 70rem; border-radius: 2rem; position: relative; transition:var(--transition-custom); transition-property:background-color;}
.main-visual-cate-item:before{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 2rem; content: ''; opacity: 0; transition:var(--transition-custom); transition-property:opacity;}
.main-visual-cate-item:nth-child(1):before{background: linear-gradient(135deg,  rgba(237,156,1,1) 0%,rgba(237,120,1,1) 100%);}
.main-visual-cate-item:nth-child(2):before{background: linear-gradient(135deg,  rgba(81,188,255,1) 0%,rgba(81,188,255,1) 16%,rgba(13,83,155,1) 100%);}
.main-visual-cate-item:nth-child(3):before{background: linear-gradient(135deg,  rgba(255,154,255,1) 0%,rgba(122,51,119,1) 100%);}
.main-visual-cate-item:nth-child(4):before{background: linear-gradient(135deg,  rgba(114,219,118,1) 0%,rgba(59,139,36,1) 100%);}
.main-visual-cate-item a{padding: 2rem 1rem; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: 2rem; position: relative; z-index: 1; box-sizing: border-box;}
.main-visual-cate-item a .txt{margin-top: 1rem; font-size: 1.8rem; line-height: 1.3; letter-spacing: -0.01em; color: #000; transition:var(--transition-custom); transition-property:color, margin-top;}
.main-visual-cate-item a .txt strong{margin-bottom: 1rem; font-size: 3rem; line-height: 1.3; letter-spacing: -0.02em; display: block;}
.main-visual-cate-item a .target{margin-top: 2.5rem; width: 18rem; height: 6rem; font-size: 1.8rem; line-height: 6rem; letter-spacing: -0.05em; color: #fff; border-radius: 4rem 4rem 0 4rem; background-color: var(--main-color); backdrop-filter: blur(30px); transition:var(--transition-custom); transition-property:color, }
/* active */
.main-visual-cate-item a:hover .target{color: #fff; background-color: #313131;}

@media all and ( max-width: 1200px ){
	.main-visual-cate-item{height: 65rem;}
	.cate-img img {width: 100%;}	
}
@media all and ( max-width: 1024px ){		
	#mainBanner{padding:7rem 0;}	
}
@media all and (max-width:800px){
	#mainBanner{padding:6rem 0; }
	.main-visual-cate-list{margin: 0;}	
	.main-visual-cate-item{margin:0 0 1rem 0; width: 100%; height: 55rem; }
	.main-visual-cate-item a{padding: 2rem 3rem;}
	.main-visual-cate-item a .cate-logo img{ height: 30px;}
	.main-visual-cate-item a .txt{ font-size: 1.7rem; line-height: 1.3;}
	.main-visual-cate-item a .txt strong{ font-size: 3rem; line-height: 1.3;}
	.main-visual-cate-item a .target{margin-top: 2.5rem; width: 12rem; height: 4rem; font-size: 1.5rem; line-height: 4rem;}
}
@media all and (max-width:480px){
	.main-visual-cate-item a .txt{ font-size: 1.6rem; line-height: 1.2;}
	.main-visual-cate-item a .txt strong{margin-bottom: 0.9rem; font-size: 2rem; line-height: 1.2;}
	.main-visual-cate-item{height: 40rem;}
	.main-visual-cate-item a .target{margin-top: 1.8rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
#mainProducts{padding:9rem 0; background-color: #f7f7f7;}
.prd-tit .txt-r a .txt{color:#484848;}
.prd-tit .txt-r a .arrow{background:url("../images/icon/gr_arrow_icon.png") no-repeat;}
.main-partner-list .slick-list { padding-bottom: 10px; }
.main-partner-list{position:relative; height: auto; margin:0 130px;-webkit-box-sizing: border-box; box-sizing: border-box;}
.main-partner-list .partner-item{float:left; -webkit-transition: all 0.5s; transition: all 0.5s;}
.main-partner-list .partner-item-inner{position:relative; height:150px; padding:0 10px; border-radius: 10px; background-color: #fff; border: 1px solid #e5e5e5; margin-bottom: 10px; }
.main-partner-list .partner-item-inner span{display:block; position:relative; height:100%; width:100%; }
.main-partner-list .partner-item-inner span img{position:absolute; top:0px; left:0px; bottom:0px; right:0px; max-width:100%; max-height:100%; margin:auto;}

.main-partner-list .partner-item.slick-current{ transition-delay:0.3s;}
.main-partner-list .slick-arrow{ position:absolute; top:-10rem; width:48px; height:48px; border:0; cursor:pointer; z-index:9; font-size:40px;}
.main-partner-list .slick-arrow i{line-height:40px; vertical-align:top;}
.main-partner-list .slick-arrow.slick-prev{right: 100px; z-index: 9997;}
.main-partner-list .slick-arrow.slick-next{right: 0px; z-index: 9997;}
.main-partner-list i{color:#aaa; }

.prd-tit-con{position: relative; width: 1400px; margin: 0 auto;}
.prd-tit-con .prd-tit{float: left; width: 100%;}
.prd-tit-con .prd-tit .txt-l{display: inline-block; vertical-align: middle; letter-spacing: -0.5px; }
.prd-tit-con .prd-tit .txt-r{ float: right; margin-top: 2rem; z-index: 9999!important; }
.prd-tab-list{float: left; margin-top: 25px;}
.prd-tab-list li{float:left; margin-left: 5px; margin-bottom: 5px;}
.prd-tab-list li:first-child{margin-left: 0;}
.prd-tab-list li a{display:block; line-height:1.0; padding: 1.7rem 3rem; text-align:center; font-size:1.8rem; font-weight:400; letter-spacing:-0.5px; color: #fff; background-color: #474747; -webkit-border-radius: 50px; -moz-border-radius: 50px ;border-radius: 50px; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.prd-tab-list li a:hover, .prd-tab-list li.selected a{background-color: var(--main-color);}

.main-partner-con{margin: 40px auto 0 auto; width: 1400px; }
.main-partner-list{margin: 0 -0.1%;}
.main-partner-list li{float: left; width: 33.13%; margin: 0 0.1%; text-align: center; overflow: hidden; }
.main-partner-list li.li-01{transition-delay:0.5s;}
.main-partner-list li.li-02{transition-delay:0.7s;}
.main-partner-list li.li-03{transition-delay:0.9s;}
.main-partner-list li.li-04{transition-delay:1.1s;}
.cm-btn-effect{display:inline-block}
.cm-btn-effect .txt{display:inline-block; vertical-align:middle; font-weight:400; font-size:16px; letter-spacing:0; margin-right:10px}
.cm-btn-effect .arrow{display:inline-block; vertical-align:middle; transform:translateX(0); transition:transform 0.4s; width:66px; height:50px; background-size:contain !important;}
@media all and (min-width:801px){
	.cm-btn-effect:hover .arrow{transform:translateX(6px)}
}
@media all and (max-width:1520px){
	.prd-tit-con{ width: 100%; }
	.main-partner-con{margin: 40px auto 0 auto; width: 100%; }
}
@media all and (max-width:1220px){
	.main-partner-list{width: 100%; }
}
@media all and ( max-width: 1024px ){		
	#mainProducts{padding:7rem 0;}	
}
@media all and (max-width:800px){
	#mainProducts{padding:6rem 0;}
	.cm-btn-effect .txt{font-size:13px}
	.cm-btn-effect .arrow{width:50px; height:37px}
	.main-partner-con{margin-top: 20px;}
	.main-partner-list{width: 100%; }
	.main-partner-list .partner-item-inner{height:60px; padding:0 10px;}
	.main-partner-list .partner-item-inner span img{max-height: 70%;}

	.main-partner-list .slick-arrow{ width:40px; height:40px; font-size:30px; top:-13rem;}
	.main-partner-list .slick-arrow i{line-height:40px;}
	.main-partner-list .slick-arrow.slick-prev{right: 30px; }
	
	/* 타이틀 */
	.prd-tit-con{position: relative; }
	.prd-tit-con .prd-tit{float: none; text-align: center;}
	.prd-tit-con .prd-tit .txt-l{width: 100%; font-size: 27px;}
	.prd-tit-con .prd-tit .txt-r{margin-top: 0; width: 100%; margin-left: 0; font-size: 14px; line-height: 1;}
	.prd-tit-con .prd-tit .txt-r br{display: none;}
	.prd-tit-con .prd-tit .txt-r span{margin-left: 5px;}
	/* 탭 */
	.prd-tab-list{margin-top: 50px; float: none; text-align: center;}
	.prd-tab-list li{float:none; display: inline-block; margin-left: 5px;}
	.prd-tab-list li a{display:block; }
}

@media all and (max-width:640px){
	.main-partner-list .slick-arrow{ top:-6rem; }
	.prd-tab-list li a{ padding: 1.3rem 3rem; }
}

@media all and (max-width:480px){
	.main-partner-list .slick-arrow{ width:20px; height:20px; font-size:20px; top:-5rem; }
	.main-partner-list .slick-arrow i{line-height:20px;}
	.prd-tab-list li a{ padding: 1.0rem 3rem; font-size: 1.5rem; }
}


/******************* 메인컨텐츠 3**********************/
#mainContent1 {padding:9rem 0;}
.main-story-top{margin-bottom:3rem; padding-left: 3%; padding-right: 3%; position:relative;}
.main-story-top .lf-tit{float:left}
.main-story-top .rt-btn{float:right; margin-top:16px}
.main-story-top .rt-btn a .txt{color:#484848;}
.main-story-top .rt-btn a .arrow{background:url("../images/icon/gr_arrow_icon.png") no-repeat;}
.main-story-con{position:relative; z-index:99}
.main-story-con .main-story-list{margin:0 -30px;}
.main-story-con .main-story-list .slick-list{padding-top:15px}
.main-story-con .main-story-list li{margin:0 30px; backface-visibility:hidden;}
.main-story-con .main-story-list li a{display:block; position:relative; }
.main-story-con .main-story-list li a .thumb{}
.main-story-con .main-story-list li a .thumb span{position:relative; display:block; padding-top:68.9%; }
.main-story-con .main-story-list li a .thumb span img{position:absolute; top:0; left:0; width:100%; height:100%; }
.main-story-con .main-story-list li a .txt-con{margin-top:7.8%}
.main-story-con .main-story-list li a .txt-con .tit{display:block; font-weight:400; font-size:23px; letter-spacing:-0.5px; color:#000; line-height:1.4}
.main-story-con .main-story-list li a .txt-con .txt{font-weight:400; font-size:18px; letter-spacing:-0.5px; color:#8d8d8d; line-height:1.66; height:3.32em; overflow:hidden; margin-top:20px}
.main-story-con .main-story-list li a .txt-con .date{display:block; font-weight:400; font-size:16px; letter-spacing:0; color:#bababa; margin-top:20px}
.main-story-con .main-story-list li a .txt-con .date .icon{vertical-align:top; margin-right:3px; position:relative; top:-1px}
.main-story-con .main-story-list li a .category{position:absolute; top:-15px; left:19px; width:64px; height:59px; text-align:center; background-color:#c41230; color:#fff; transition:height 0.3s}
.main-story-con .main-story-list li a .category.cate-post{background-color:#000}
.main-story-con .main-story-list li a .category em{display:block; padding-top:24px; font-weight:700; font-size:15px; letter-spacing:1.5px; }
.main-story-con .main-story-list li a .category i{position:absolute; bottom:16px; right:25px; opacity:0; transition:opacity 0.2s 0s; font-size:15px}
.main-story-con .main-story-list .slick-arrow{position:absolute; top:0; margin-top:9%; z-index:9}
.main-story-con .main-story-list .slick-arrow.slick-prev{left:-23px}
.main-story-con .main-story-list .slick-arrow.slick-next{right:-23px}
.main-story-con .main-story-list .slick-arrow i{font-size:40px; color:#000}
@media all and (min-width:801px){
	.main-story-con .main-story-list li a:hover .category{height:90px}
	.main-story-con .main-story-list li a:hover .category i{opacity:1; transition:opacity 0.2s 0.15s}
}
@media all and ( max-width: 1750px ){		
	.main-story-con .main-story-list{margin:0 -10px}
	.main-story-con .main-story-list .slick-arrow.slick-prev{left:-18px}
	.main-story-con .main-story-list .slick-arrow.slick-next{right:-18px}
}
@media all and ( max-width: 1660px ){	
	.main-story-con{padding:0 30px}
	.main-story-con .main-story-list{margin:0 -30px}
	.main-story-con .main-story-list li{margin:0 30px}
}
@media all and ( max-width: 1024px ){	
	#mainContent1 {padding:7rem 0;}
	.main-story-con{padding:0}
	.main-story-con .main-story-list{margin:0 10px}
	.main-story-con .main-story-list li{margin:0 15px}
	.main-story-con .main-story-list .slick-arrow.slick-prev{left:-23px}
	.main-story-con .main-story-list .slick-arrow.slick-next{right:-23px}
}
@media all and ( max-width: 800px ){
	#mainContent1 {padding:6rem 0;}
	.main-story-top{text-align:center; margin-bottom:3rem;}	
	.main-story-top .lf-tit{float:none}
	.main-story-top .rt-btn{float:none;}
	.cm-btn-effect .txt{font-size:13px}
	.cm-btn-effect .arrow{width:50px; height:37px}
	.main-story-con .main-story-list{margin:0 15px}
	.main-story-con .main-story-list li a .category{width:58px; height:54px}
	.main-story-con .main-story-list li a .category em{font-size:13px; padding-top:22px}
	.main-story-con .main-story-list li a .txt-con{margin-top:15px}
	.main-story-con .main-story-list li a .txt-con .tit{font-size:19px}
	.main-story-con .main-story-list li a .txt-con .txt{font-size:14px; margin-top:10px}
	.main-story-con .main-story-list li a .txt-con .date{font-size:13px}
	.main-story-con .main-story-list .slick-arrow{margin-top:22%; z-index:9}
	.main-story-con .main-story-list .slick-arrow i{font-size:26px;}
}
@media all and ( max-width: 640px ){	
	.main-story-con .main-story-list li{margin:0 5px}
	.main-story-con .main-story-list .slick-arrow{margin-top:35%}
	.main-story-con .main-story-list .slick-arrow.slick-prev{left:-26px}
	.main-story-con .main-story-list .slick-arrow.slick-next{right:-26px}
}


/* -------- 메인 컨텐츠 :: 컨텐츠4 -------- */
.bg_wrap{position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center center;background-size:cover;z-index:-1;-webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
.cell:hover .bg_wrap{
	-ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.main_brand {width: 100%; float: left;}
.main_brand:after{content:"";display:block;clear:both}
.main_brand > div{position:relative;width:100%;float:left; overflow:hidden}
.main_brand .brand01 { padding: 120px 0; }
.main_brand .brand01 .bg_wrap{background:url(../images/main/ban_bg.jpg) no-repeat center bottom;background-size:cover;}
.main_brand .brand01 a{color:#fff; }
.abt_bx { position: relative; text-align: center;width: 100%; box-sizing: border-box; }
.abt_bx p { font-size:5.6rem; line-height: 1.2; margin-bottom: 2rem; letter-spacing: -1px; font-weight: 700; }
.abt_bx h2 { font-size:1.8rem; letter-spacing: -1px; line-height: 1.5; font-weight: 400; margin: 15px 0 0 0; color: rgba(255,255,255,0.6); }
.abt_bx h3 { font-size:2.2rem; line-height: 1.4; font-weight: 700; margin: 0 0 5px 0; }
/* -------- 버튼 -------- */
.invest-more-btn{position:relative; display:inline-block; width:50px; height:50px; background-color:#fff; color:#000; font-size:1.7rem; transition:width 0.3s; border-radius: 100px; }
.invest-more-btn.black{color:#fff; background-color:#000;}
.invest-more-btn.pink{color:#3877b9; background-color:#fff;}
.invest-more-btn .icon{display:block; width:50px; height:100%; line-height:50px; font-size:24px; text-align:center;}
.invest-more-btn .icon i{display:inline-block; transition:all 0.3s; position:relative; top:2px;}
.invest-more-btn .txt{position:absolute; top:50%; overflow:hidden; height:1.7rem; margin-top:-0.5em; left:10px; width:160px; }
.invest-more-btn .txt em{display:inline-block; transform:translateY(100%); opacity:0; transition:all 0.3s 0s}
.cell:hover .invest-more-btn{width:160px}
.cell:hover .invest-more-btn .icon i{transform:rotate(180deg)}
.cell:hover .invest-more-btn .txt em{ transform:translateY(0%); opacity:1; transition-delay:0.2s}
@media all and ( max-width: 1024px ){
.main_brand {width: 100%; }	
.main_brand .brand01 { padding: 70px 0; }
.abt_bx p { font-size:5rem; }
}
@media all and ( max-width: 800px ){
.invest-more-btn{width:40px; height:40px;}
.invest-more-btn .icon{width:40px; line-height:40px; font-size:20px;}
.cell:hover .invest-more-btn{width:140px}
.invest-more-btn .txt{ left:5px; width:140px; }
}
@media all and (max-width:640px){
.main_brand .brand01 { padding: 50px 4rem; box-sizing: border-box; }
}
@media all and (max-width:480px){
.abt_bx p { font-size:4.6rem; }
.abt_bx h2 { font-size:1.6rem; }
.abt_bx h3 { font-size:2.0rem; }
.main_brand .brand01 { padding: 50px 4rem; }
}