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

/* ******************  메인 인트로 ********************** */
@media all and ( max-width: 800px ){
	#mainIntro .main-intro-txt svg{height:3rem;}

	.main-start #mainIntro.after-effect .main-intro-txt{animation: introSvgAniAfterM 2.3s cubic-bezier(0.4, 0, 0.2, 1) both;}

	@keyframes introSvgAniAfterM {
		0% { opacity:1;filter:Alpha(opacity=100); transform:Translate(-50%, -50%) scale(0.9); }
		100% { opacity:0;filter:Alpha(opacity=0); transform:Translate(-50%, -50%) scale(2.5); }
	}
}

/* ******************  메인 비주얼 ********************** */
@media all and ( max-width: 1280px ){
	/* 공통 :: 레이아웃 */
	#fullpage .section:not(#mainVisual){height:auto !important;}
	#fullpage .fp-section .fp-tableCell{height:auto !important;}
}
@media all and ( max-width: 800px ){
	/* 메인 비주얼 :: 이미지 */
	.main-visual-item .main-visual-pc-img{display:none;}
	.main-visual-item .main-visual-m-img{display:block;}
	/* 메인 비주얼 :: 텍스트 */
	.main-visual-txt-box.area-box{padding-bottom:5rem;}
	.main-visual-txt-box .main-visual-txt1{font-size:5.6rem}
	.main-visual-txt-box .main-visual-txt2{font-size:2rem}
	/* 메인 비주얼 :: Progress */
	.main-visual-item .main-visual-video-con .progress-bar{display: none;}
	/* 메인 비주얼 :: 어워드 + 화살표 */
	.main-visual-fixed-inner{justify-content: flex-start; align-items: flex-start; flex-direction: column-reverse; margin-bottom:10rem;}
	.main-visual-awards{margin-left:0; margin-bottom:2rem;}
}


/* -------- 메인 컨텐츠 :: 컨텐츠1(About) -------- */
@media all and (min-width:1921px){
	#mainContent1 .bg img{width:calc(100% + 50px);}
}
@media all and (max-width:800px){
	#mainContent1{height:90rem;}
	.main-about-tit-box .tit{font-size:6rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2(Solution) -------- */
@media all and (min-width:801px){
	/* Solution :: 좌측컨텐츠 :: 리스트 */
	.solution-list-box{position: relative; margin-top:5.5rem; display: flex; flex-direction:column; align-items: flex-start}
	.solution-list-box .list-item{margin-bottom:0.5rem;}
	.solution-list-box .list-item .cm-main-effect{padding-right:5rem;}
	.solution-list-box .list-item:last-child{margin-bottom:0rem;}
	.solution-list-box .list-item a{position: relative; display: block;}
	.solution-list-box .list-item a em{font-size:3rem; line-height:1.5; letter-spacing:-0.005em; color:rgba(255,255,255,0.22) !important; transition:var(--transition-custom);}
	.solution-list-box .list-item a:before{position: absolute; content:'\e93f'; font-family:'xeicon'; font-size:3rem; color:#fff; top:50%; right:0rem; transform:translate(100%, -50%); pointer-events:none; opacity:0; transition:var(--transition-custom);}
	/* active */
	.solution-list-box .list-item a em:hover,
	.solution-list-box .list-item.active a em{color:#fff !important;}
	.solution-list-box .list-item a:hover:before,
	.solution-list-box .list-item.active a:before{opacity:1; right:-2rem;}
}

@media all and (max-width:1480px){
	.solution-area-box{padding:8.33vw var(--area-padding); max-width:none; box-sizing:border-box;}
}
@media all and (max-width:1280px){
	/* Solution :: 좌측컨텐츠 */
	.main-solution-wrap .left-box{width:calc(60% - 1rem);}
	/* Solution :: 우측컨텐츠 */
	.main-solution-wrap .right-box{width:40%;}
	/* Solution :: 우측컨텐츠 :: 탭 */
	.main-solution-tab-style{inset:auto 3rem 9rem; width: calc(100% - 6rem);}
}
@media all and (max-width:800px){
	#mainContent2{height:auto; min-height:auto; z-index:1;}
	.main-solution-wrap{display: block;}

	
	/* 드롭다운 */
	.main-solution-wrap .main-drop-menu-style{position:relative; width:100%;}
	.main-solution-wrap .main-drop-menu-style .move-line-wrap{display: none;}
	.main-solution-wrap .main-drop-open-btn-style{display:block; position:relative; padding:0 1.5rem; height:5.4rem; line-height:5.4rem; font-size:2rem; background-color:#333; box-sizing:border-box; border-radius:3px;}
	.main-solution-wrap .main-drop-open-btn-style span{color:#fff; }
	.main-solution-wrap .main-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:1.5rem; margin-top:-7px}
	.main-solution-wrap .main-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.main-solution-wrap .main-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.main-solution-wrap .main-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent}
	.main-solution-wrap .main-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.main-solution-wrap .main-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:1rem 1.5rem; border:0; text-align:left;}
	.main-solution-wrap .main-drop-menu-style ul li a em{font-size:1.4rem; color:#000 !important}
	.main-solution-wrap .main-drop-menu-style ul li.selected{background-color:transparent;}
	.main-solution-wrap .main-drop-menu-style ul li.selected a em{color:var(--main-color); font-weight:600; }

	/* Solution :: 좌측컨텐츠 */
	.main-solution-wrap .left-box{width:100%;}
	/* Solution :: 좌측컨텐츠 :: 텍스트 */
	.solution-area-box{padding:9rem var(--area-padding) 3rem;}
	.solution-tit-box .tit{font-size:7.6rem;}
	.solution-tit-box .solution-left-txt-JS{height:15rem;}

	/* Solution :: 좌측컨텐츠 :: 리스트 */
	.solution-list-box{margin-top:1rem;}
	.solution-list-box .list-item{margin-bottom:0.5rem;}
	.solution-list-box .main-solution-wrap .main-drop-open-btn-style{background:rgba(255,255,255,0.2);}

	/* Solution :: 우측컨텐츠 */
	.main-solution-wrap .right-box{position: relative; width:100%; height:179.6vw;}
	.main-solution-wrap .right-box:before,
	.main-solution-wrap .right-box:after{display: none;}
	.main-solution-wrap .right-box .main-drop-open-btn-style{background:var(--main-color);}

	/* Solution :: 우측컨텐츠 :: 탭 */
	.main-solution-tab-style .main-tab-list-style{padding:0; border-radius:0; background:transparent;}

	/* Solution :: 우측컨텐츠 :: 컨텐츠 */
	.solution-tab-con{padding:0; height:auto; display: block;}
	.solution-tab-con .bg{position: relative; height:auto;}
	.solution-tab-con .bg span{padding-top:179.6vw}
	.solution-tab-con .txt-box{position: absolute; bottom:18rem; left:0; width:100%;}
	.solution-tab-con .tab-link{top:auto; bottom:4rem; left:50%; transform:translate(-50%, 0%); width:100%; height:auto; }
	.solution-tab-con .tab-link .icon-box .bg,
	.solution-tab-con .tab-link .icon-box .dots,
	.solution-tab-con .tab-link svg{display: none;}
	.solution-tab-con .tab-link .blind{position: relative; inset:auto; width:auto; height:auto; font-size:1.8rem; line-height:1; color:#000; text-align:center;}
	.solution-tab-con .tab-link .blind i{margin-left:1rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3(Industry) -------- */
@media all and (max-width:1640px){
	/* 오버시 */
	.product-overview-list .overview-item .overview-thumb-box{padding:10rem 3rem;}
	.product-overview-list .overview-item .overview-thumb-box .tit-box .tit .br-1640{display: block;}

	.product-overview-list .overview-item .overview-tit-box .tit{font-size:2rem;}
	.product-overview-list .overview-item .overview-tit-box .txt{font-size:1.6rem;}

	.product-overview-list .overview-item .overview-thumb-box .tit-box .tit{font-size:4rem;}
	.product-overview-list .overview-item .overview-thumb-box .tit-box .txt{font-size:1.4rem;}
	.product-overview-list .overview-item .overview-thumb-box .check-list p,
	.product-overview-list .overview-item .overview-thumb-box .check-list p:before{font-size:1.4rem;}
}
@media all and (max-width:1280px){
	/* -------- Industry 아코디언 -------- */
	.product-overview-con {width: 100%;}
	.product-overview-list {position: relative; width: auto; height:auto; flex-wrap: wrap; padding: 0 var(--area-padding); box-sizing: border-box;}
	.product-overview-list .overview-item { width: 100%; margin: 1rem 0;}
	.product-overview-list .overview-item .overview-img-box {height: 40rem;}
	.product-overview-list .overview-item .overview-img-box:before{position: absolute; content:''; bottom:0; left:0; width:100%; height:100%; background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); z-index:1;}
	.product-overview-list .overview-item .overview-img-box img{opacity:1; top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; height:100%;}
	/* 기본 */
	.product-overview-list .overview-item .overview-tit-box{top:auto; left:3.5rem; bottom:3rem; transform:none; width:calc(100% - 7rem); text-align:left;}
	.product-overview-list .overview-item .overview-tit-box .prd-overview-btn-m{display: flex; align-items:center; justify-content:space-between; width:16rem; height:4.5rem; font-size:1.6rem; letter-spacing:-0.015em; font-weight:500; color:#fff; background:var(--main-color); margin-top:2rem; padding:0 var(--area-padding); box-sizing:border-box;}
	.product-overview-list .overview-item .overview-tit-box .prd-overview-btn-m i{font-weight:400;}
	/* 오버시 */
	.product-overview-list .overview-item .overview-thumb-box{display: none;}
}
@media all and (max-width:800px){
	.main-industry-tit-box{padding:10rem 0 5rem;}
	.main-industry-tit-box .tit{font-size:7.6rem;}

	.product-overview-list .overview-item .overview-tit-box{left:var(--area-padding); width: calc(100% - var(--area-padding));}
}
@media all and (max-width:480px){
	/* -------- Industry 아코디언 -------- */
	.product-overview-list .overview-item .overview-img-box {height: calc(100vw - (2 * var(--area-padding)));}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4(News) -------- */
@media all and (max-width:800px){
	#mainContent4{margin-top:15rem;}
	.news-top-wrap{margin-bottom:3rem;}
	.main-news-tit-box{display: block;}
	.main-news-tit-box .tit{font-size:7.6rem;}
	.main-news-tit-box .txt{margin-left:0; margin-top:3rem;}

	.main-news-list{margin:0 calc(-1 * var(--area-padding));}

	.main-news-list .list-item{border-left:0;}
	.main-news-list .list-item a{padding:3rem var(--area-padding);}
	.main-news-list .list-item .txt-box{margin-top:3rem;}
	.main-news-list .list-item .txt-box .news-tit{font-size:2.4rem; font-weight:600;}
	.main-news-list .list-item .txt-box .news-txt{display: none;}
	.main-news-list .list-item .txt-box .bottom-box{margin-top:3rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠5(FlowTxt) -------- */
@media all and (max-width:800px){
	#mainContent5{margin-top:7rem; padding-bottom:5rem;}
	.main-flow-txt-box .flow-txt{font-size:10rem;}
}

/* ****************** 
	* Mouse Pointer
********************** */
@media all and (max-width:800px){
	.mouse-pointer,
	.pointer-circle,
	.pointer-txt,
	.pointer-arrow{visibility: hidden; opacity: 0;}
}