@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2018-03-27
******************************************************** */

/* **************************
### 메인 비주얼 ###
************************** */
#mainVisual{overflow:hidden; width:100%; height:1000px; height:100vh; position:relative;}

/* ******************  메인 이미지 ********************** */
.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-con .slick-slide > div, 
.main-visual-item{
	height:100%;
}
.main-visual-con{z-index:1;}

/* -------- 비주얼 이미지 영역 -------- */
/* 비주얼 영역 :: 이미지 */
.main-visual-item{position:relative;}
.main-visual-item .main-visual-pc-img,
.main-visual-item .main-visual-m-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;}

/* active */
.main-visual-item.active-item .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-txt-con{
	position:absolute;
	top:50%;
	left:0;
	right:0;
	text-align:center;
	transform:translateY(-50%);
	margin-top:20px;
	
}
.background-video-wrapper .main-visual-txt-con{z-index:11; transition:opacity 0.3s; opacity:0;}
.background-video-wrapper.active-item .main-visual-txt-con{opacity:1.0;}
.main-visual-txt-con .main-visual-tit{overflow:hidden; color:#fff; font-size:52px; font-weight:400; letter-spacing:-2px; margin-bottom:20px;}
.main-visual-txt-con .main-visual-tit br{display:none;}
.main-visual-txt-con .main-visual-txt{overflow:hidden; color:#fff; font-size:20px; font-weight:700; letter-spacing:0.5px; margin-bottom:30px; line-height:1.3}
.main-visual-txt-con .hidden{display:inline-block; opacity:0; transform:translateY(100%)}
.main-visual-txt-con .main-visual-btn{display:block; width:150px; height:40px; line-height:38px; margin:0px auto; color:#fff; opacity:0}
.main-visual-txt-con .main-visual-btn em{font-weight:400; letter-spacing:0px;}
.main-visual-txt-con .main-visual-tit .char,
.main-visual-txt-con .main-visual-txt .char{
	display:inline-block; 
	opacity:0; 
	transition:all 0.6s; 
	transform:translateY(100%); 
}
.active-item .main-visual-txt-con .main-visual-tit .char{animation: visualTextAni 0.6s ease-in-out 0s forwards; animation-delay:calc((25ms * var(--char-index)) + 500ms );}
.active-item .main-visual-txt-con .main-visual-txt .char{animation: visualTextAni 0.6s ease-in-out 0s forwards; animation-delay:calc((25ms * var(--char-index)) + 800ms );}
.active-item .main-visual-txt-con .main-visual-btn{
	-webkit-animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both 1s;
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both 1s;
}

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


/* -------- 비주얼 영역 :: Dots (메인비주얼, 하단 제품정보 공통) -------- */
#mainContainer .slick-dots li:first-child{margin-left:0}
#mainContainer .slick-dots li span{position:relative; display:block; width:20px; height:20px;}
#mainContainer .slick-dots li span:before{position:absolute; top:50%; left:50%; width:10px; height:10px; box-sizing:border-box; border:2px solid rgba(255,255,255,0.25); border-radius:50%; content:""; transform:translate(-50%,-50%); opacity:1.0; transition:all 0.2s; }
#mainContainer .slick-dots li span svg{position:absolute; top:0; left:0; width:20px; height:20px;transform:rotate(-90deg); transition:all 0.5s}
#mainContainer .slick-dots li span svg circle{
	fill:transparent; 
	stroke:#fff; 
	stroke-width:3px; 
	stroke-linecap:round; 
	stroke-dasharray: 100;
	stroke-dashoffset: -60;
}
/* .ie-browser #mainContainer .slick-dots li span svg circle{stroke-dasharray: 100; stroke-dashoffset: -60;} */
#mainContainer .slick-dots .slick-active span:before{opaicty:0; width:19px; height:19px; border-width:3px; }
#mainContainer .slick-dots .slick-active svg{opacity:1.0;}
#mainContainer .slick-dots .slick-active svg circle{display:block; /* animation:circle-loading-ani 4s forwards  */}
/* ios 오류 확인 */
.ios-os #mainContainer .slick-dots span svg circle{stroke-dasharray: 60; stroke-dashoffset: 60; }
.ios-os #mainContainer .slick-dots .slick-active span svg circle{animation:circle-loading-ani 5s forwards }

/* 메인비주얼 */
.main-visual-con .slick-dots{position:absolute; bottom:120px; left:0; right:0px; text-align:center;  z-index:11;}
.main-visual-con .slick-dots li{display:inline-block; margin:0 5px; cursor:pointer;}

/* ******************  메인 비디오 ********************** */
/* -------- 비주얼 비디오 영역 -------- */
/* 비디오 영역  */
.background-video-wrapper{position:absolute; top:0; left:0; overflow:hidden; height:100%; width:100%; background-color:#000; z-index:11;}
.background-video{overflow:hidden; position:absolute; top:0; left:0px; width:100%; height:100%; transform:scale(1.01);}
.background-video:after{position:absolute; top:0px; left:0px; right:0px; bottom:0px; content:""; background-color:#000; z-index:111; transition:all 0.5s; }
.background-video.start:after{opacity:0;filter:Alpha(opacity=0);  transition:all 2s;}
.background-video-wrapper.hide{transform:translateY(-120%); transition:transform 1.5s}
.background-video iframe{
	width: 100vw;
	height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
	min-height: 100vh;
	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;
}
.background-video-alternative{display:none; position:absolute; top:0; left:0px; width:100%; height:100%; background-size:cover !important;}
.background-video-wrapper .ajax-loading-icon{display:block; z-index:11;}

/* -------- 비주얼 스크롤아이콘 -------- */
.main-scroll-icon{position:absolute; bottom:50px; left:50%; padding-top:26px; text-align:center; z-index:11; transform:translateX(-50%)}
.main-scroll-icon .arrow{position:absolute; bottom:20px; left:50%; margin-left:-9px; color:#fff; animation: arrow-ani 1s ease-in-out infinite;}
.main-scroll-icon .arrow i{font-size:18px;}
.main-scroll-icon p{display:block; color:#fff; letter-spacing:1px; font-size:12px; font-weight:600; }
.main-scroll-icon p .char{display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; animation-delay:calc(40ms * var(--char-index));}
@keyframes arrow-ani {
	0% {
		opacity: 1;
		transform:  translateY(0px);
	}
	50% {
		opacity: 0.5;
		transform: translateY(-5px);
	}
	100% {
		opacity: 1;
		transform:  translateY(0px);
	}
}
@keyframes scroll-down-ani {
    0% {
        opacity: 0;
        transform: translateY(-50%) rotateX(90deg)
    }

    15%,85% {
        opacity: 1;
        transform: translateY(0) rotateX(0)
    }

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

/* **************************
### 메인 컨텐츠 ###
************************** */
#mainContent{margin-left:220px; transition: all .2s ease-out 0s}

/* ******************  메인 :: 제품 ********************** */
/* -------- 제품 :: Layout -------- */
#mainProductContent{position:relative;}
.main-prd-info-box-size1{position:relative; float:left; width:29.6912%; }
.main-prd-info-box-size2{float:left; width:40.6176%; }
.main-prd-info-box-size3{float:left; width:59.3824%; }
.main-prd-info-box-size1 .main-prd-info-layout{position:relative; padding-top:100%}
.main-prd-info-box-size2 .main-prd-info-layout{position:relative; padding-top:73.0993%;}
.main-prd-info-box-size3 .main-prd-info-layout{position:relative; padding-top:50%}
.main-prd-info-container,
.main-prd-img-container{position:absolute !important; top:0px; left:0px; width:100%; height:100%;}

/* -------- 제품 :: 정보 -------- */
.main-prd-info-box1{position:absolute; top:0px; left:0px; z-index:11;}
.main-prd-info-box1 .main-prd-info-container{background-color:#589841;}
/* 제품 :: 정보 :: 텍스트 */
.main-prd-info-box1 .main-prd-item dl{font-size:20px; letter-spacing:-0.75px; color:#fff; padding:16% 10%; -webkit-box-sizing: border-box; box-sizing: border-box;}
.main-prd-info-box1 .main-prd-item dl .main-prd-en-tit{overflow:hidden; display:block; font-size:1em; margin-bottom:1.8em; letter-spacing:0.25px; font-weight:400; }
.main-prd-info-box1 .main-prd-item dl .main-prd-en-tit b{font-weight:900;}
.main-prd-info-box1 .main-prd-item dl .main-prd-tit{display:block; font-weight:400; font-size:2.4em; margin-bottom:0.7272em; line-height:1.2; letter-spacing:-2px; }
.main-prd-info-box1 .main-prd-item dl .main-prd-tit b{font-weight:400;}
.main-prd-info-box1 .main-prd-item dl .main-prd-tit em{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.main-prd-info-box1 .main-prd-item dl .main-prd-txt{overflow:hidden; font-size:1em; line-height:1.6; font-weight:300;}
.main-prd-info-box1 .main-prd-item dl .main-prd-txt em{display:block; height:4.8em;}
/* active */
.main-prd-info-box1 .main-prd-item dl .hidden{display:inline-block; font-weight:inherit; opacity:0; transform:translateY(100%); transition:transform 1s 0s, opacity 1s 0s}
.main-prd-info-box1 .slick-active dl .main-prd-tit .hidden{transition-delay:0.2s}
.main-prd-info-box1 .slick-active dl .main-prd-txt .hidden{transition-delay:0.5s}
.main-prd-info-box1 .slick-active dl .hidden{opacity:1.0; transform:translateY(0); }

/* 제품 :: 정보 :: 화살표 */
.main-prd-info-box1 .main-prd-controls{position:absolute; bottom:10%; right:10%; z-index:11; margin-right:-20px;}
.main-prd-info-box1 .main-prd-controls button{transition:all 0.5s}
.main-prd-info-box1 .main-prd-controls button.slick-hidden{display:inline-block; opacity:0.5; cursor:default;}
.main-prd-info-box1 .main-prd-controls button i{font-size:48px; color:#fff;}
.main-prd-info-box1 .main-prd-controls .main-prd-prev-btn{margin-right:48px}
.main-prd-info-box1 .main-prd-controls .slick-disabled{opacity:0.25}

/* 제품 :: 정보 :: Dots */
.main-prd-info-container .slick-dots{position:absolute; bottom:10%; left:10%; margin-bottom:16px; z-index:11;}
.main-prd-info-container .slick-dots li{float:left; margin:0 5px; cursor:pointer;}

/* -------- 제품 :: 이미지 -------- */
.main-prd-list-wrapper{overflow:hidden; height:0; padding-top:59.38%; }
.main-prd-list-wrapper .slick-list{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.main-prd-img-container .main-prd-img{
	display:block;
	width:100%;
	height:100%;
	background-position:50% 50% !important;
	background-size:cover !important;
}
.main-prd-img-container .prd-name{position:absolute; top:29px; left:29px; color:#8b857e; font-size:15px; font-weight:300; text-transform:uppercase}
.main-prd-img-container .prd-name.white{color:#fff;}
.main-prd-img-container .prd-name.black{color:#000;}
.main-prd-img-container .prd-name.gray{color:#8b857e}
.main-prd-img-container .prd-name b{font-weight:900;}
.main-prd-info-box2{margin-left:29.6912%; }

/* Active */
.main-prd-info-box1,
.main-prd-img-wrapper > li{
	clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
	transition: all 1s cubic-bezier(0, 0, 0.29, 1.07)
}
.main-prd-info-box-size2{transition-duration:1s !important;}
.main-prd-info-box-size3{transition-duration:0.9s !important;}
[data-aos='product-in'].aos-animate .main-prd-info-box1,
[data-aos='product-in'].aos-animate .main-prd-img-wrapper > li{
	opacity: 1;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
@media all and (min-width:1025px){
	/* -------- 제품 :: 정보 -------- */
	/* 제품 :: 정보 :: 텍스트 */
	.main-prd-info-box1 .main-prd-item dl .main-prd-tit{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
}

/* ******************  메인 ::  시설물 아코디언 리스트 ********************** */
.accordion-list .accordion-item{position:relative; overflow:hidden;  }
.accordion-list .accordion-item .accordion-inner{display:block; width:100%; position:relative; height:100%; margin:0; }

/* 아코디언 내용 */
.accordion-inner-box{
	position:relative; height:100%; width:100%; 
	opacity:0;filter:Alpha(opacity=0);
	-webkit-transition:opacity 0.2s;
	-moz-transition:opacity 0.2s;
	-o-transition:opacity 0.2s;
	-ms-transition:opacity 0.2s;
	transition:opacity 0.2s;
}
.accordian-tit-box{position:absolute; right:0; top:0; width:120px; height:100%; z-index:1; cursor:pointer;}
.accordian-tit-box:before{
	position:absolute; 
	top:0px; left:0px; 
	width:100%; 
	height:100%; 
	content:""; 
	background-color:rgba(0,0,0,0.7); 
	opacity:1.0;filter:Alpha(opacity=100);
	-webkit-transition:opacity 0.2s;
	transition:opacity 0.2s;
}
.accordian-tit-box .accordian-tit{position:absolute; top:100px; left:0; right:0px;transform:rotate(90deg); overflow:hidden;}
.accordian-tit-box .accordian-tit strong{display:block; color:#fff; font-size:25px; font-weight:300;}

/* 아코디언 타이틀 아이콘 */
.accordian-tit-box .accordian-arrow{position:absolute; width:50px; height:50px; bottom:50px; left:50%; transition:all 0.3s; margin-left:-25px;}
.accordian-tit-box:hover .accordian-arrow{transform:rotate(180deg)}
.accordian-tit-box .accordian-arrow i{font-size:48px; color:#fff;}
.accordian-tit-box .accordian-link-icon{position:absolute; width:50px; height:50px; bottom:50px; left:50%;  margin-left:-25px; opacity:0; visibility:hidden; transition:all 0.3s 0s; transform:translateX(-10px)}
.accordian-tit-box .accordian-link-icon:before{position:absolute; top:50%; left:0px;width:26px; height:4px; margin-top:-3px; background-color:#fff; content:""; transition:all 0.3s 0s; opacity:0;}
.accordian-tit-box .accordian-link-icon i{font-size:48px; color:#fff; transition:all .3s}
.accordian-tit-box .accordian-link-icon:hover:before{opacity:1.0; transform:translateX(5px)}
.accordian-tit-box .accordian-link-icon:hover i{transform:translateX(5px)}

/* 아코디언 내용 Active */
.active .accordion-inner-box{opacity:1.0;filter:Alpha(opacity=100); background-size:cover !important;}
.active .accordian-tit-box{cursor:default;}
.active .accordian-tit-box:before{background-color:#8b857e}
.active .accordian-tit-box .accordian-tit strong{
	animation:active-title 0.3s alternate both 0.1s;
	-webkit-animation:active-title 0.3s alternate both 0.1s;
}
@keyframes active-title {
	0% {
		transform:translateY(100%)
	}
	100% {
		transform:translateY(0)
	} 
}
.active .accordian-tit-box .accordian-arrow{opacity:0;}
.active .accordian-tit-box .accordian-link-icon{opacity:1.0; visibility:visible; transition-delay:0.3s; transform:translateX(0)}


@media all and ( min-width: 1367px ){
	.accordion-list-box .accordion-list{height:700px;}
}
@media all and ( min-width: 1025px ){
	.accordion-list-box .accordion-list{ width:100%; height:700px; white-space:nowrap; overflow:hidden; font-size:0; display:flex;}
	.accordion-list .accordion-item{width:120px; float:left; height:100%; white-space:nowrap; } /* 접힌 li의 width*/
	.accordion-list .accordion-item .accordion-inner{}
	.accordion-list .accordion-item .accordion-m-img{display:none;}
}


/* ******************  메인 :: 뉴스 게시판 ********************** */
#mainBoardContent{overflow:hidden; padding:213px 0; background:url(/images/main/main_board_bg.jpg) no-repeat ; background-size:cover;}
/* 메인 게시판 :: 탭 */
.main-board-tab-list{margin-bottom:85px; text-align:center;}
.main-board-tab-inner {display:inline-block; position: relative; text-align:center;}
.main-board-tab-inner .line { height: 5px; position: absolute;  bottom: 0; background: #333;}
.main-board-tab-inner ul li {display:inline-block; margin-left:-4px; width:100px; text-align:center;}
.main-board-tab-inner ul li:first-child{margin-left:0}
.main-board-tab-inner li a{display:block; padding-bottom:22px; border-bottom:5px solid #ddd; color:#000; font-size:15px; font-weight:600; }
/* 메인 게시판 :: 리스트 */
.main-board-list-container{position:relative;}
.main-board-list-container .slick-list{overflow:visible }
.main-board-list-container .slick-slide > div{margin:0 10px;}
.main-board-item{float:left; opacity:0; transform:translateY(50px); transition:all 1.5s;}
.main-board-item a{overflow:hidden; display:block; position:relative; padding:16px 0 190px; }
.main-board-item a:before{
	content:"";
	display: block;
	position: absolute;
	top: 16px;
	left: 0;
	bottom: 0;
	width: 100%;
	background-color: #333;
	transform-origin: 0 0 ;
	transform: scaleY(0); 
	z-index:1;
	transition: transform .5s cubic-bezier(.32,.625,.58,1);
}
.main-board-item .main-board-thumb-box{overflow:hidden; position:relative;  }
.main-board-item .main-board-thumb{display:block; position:relative; /* padding-top:55.31%; */ padding-top:72.72%; height:0; transition: all 1s; transform: scale(1.2);}
.main-board-item .main-board-info-box{
	position:absolute;
	left:0;
	right:0;
	top:16px;
	bottom:0px;
	/* margin-top:55.31%; */
	margin-top:72.72%;
	z-index:2;
	transition:margin-top 0.5s;
}
.main-board-item .main-board-info-inner{position:relative; z-index:1; padding:40px 6%;  transition:all 0.5s; }
.main-board-item .main-board-info-inner .category{position:absolute; left:6%; top:0; padding:11px 14px; background-color:#5bb531; color:#fff; font-size:10px; font-weight:700; transform:translateY(-16px); transition:all 0.5s}
.main-board-item dl{font-size:15px; }
.main-board-item dl dt{position:relative; margin-bottom:1em; transition:all 0.5s}
.main-board-item dl dt .main-board-tit{
	height:2.88em;
	overflow:hidden;
	display:block;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height:1.44; 
	color:#000; 
	font-size:1.66em; 
	font-weight:500; 
	letter-spacing:-1px; 
	transition:all 0.5s
}
.main-board-item dl dt:before{position:absolute; bottom:-25px; left:0; width:100px; height:1px; background-color:#fff; content:""; display:none;}
.main-board-item dl dt:after{position:absolute; bottom:-25px; left:0; width:100%; height:1px; background-color:#fff; opacity:0.2; content:""; display:none; }
.main-board-item dl dd{font-size:1em; color:#999; letter-spacing:-0.25px; line-height:2; transition:all 0.5s}
.main-board-item .main-board-txt{
	height:2em;
	overflow:hidden;
	display:block;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	transition:height 0.5s
}
/* 메인 게시판 :: Arrow */
.main-board-list .slick-prev,
.main-board-list .slick-next{position:absolute; bottom:100%; width:100px; height:100px; color:#000; font-size:36px; z-index:11; margin-bottom:55px; transition:all 0.5s 0.2s; opacity:0}
.main-board-list .slick-prev{left:-20px; transform:translateX(-30px)}
.main-board-list .slick-next{right:-25px; transform:translateX(30px)}

@media all and ( min-width: 1025px ){
	/* over */
	.main-board-item a:hover:before{/* transform-origin: 0 0; transform: scalex(1); */ transform-origin: 100% 100%; transform: scaleY(1);}
	.main-board-item a:hover .main-board-info-box{margin-top:0}
	.main-board-item a:hover .main-board-info-inner{padding-top:87px}
	.main-board-item a:hover .main-board-info-inner .category{padding-top:62px;}
	.main-board-item a:hover dl dt{margin-bottom:60px}
	.main-board-item a:hover dl dt:before,
	.main-board-item a:hover dl dt:after{display:block;}
	.main-board-item a:hover dl dt .main-board-tit{color:#fff;}
	.main-board-item a:hover dl dd{color:#fff; opacity:0.6}
	.main-board-item a:hover .main-board-txt{height:12em; -webkit-line-clamp: 6;}
}
/* Active */
[data-aos=board-in].aos-animate .main-board-item{
	opacity:1.0;
	transform:translateY(0);
}
[data-aos=board-in].aos-animate .main-prd-item .main-prd-photo-con:after{
	height:0;
}
[data-aos=board-in].aos-animate .main-board-item .main-board-thumb{
	opacity:1.0;
	transform:scale(1)
}
[data-aos=board-in].aos-animate.main-board-list .slick-prev,
[data-aos=board-in].aos-animate.main-board-list .slick-next{opacity:1.0; transform:translateX(0px)}

/* ******************  하단영역(기업소개로고/뉴스레터/홍보영상보기) ********************** */
#mainBottomContent{overflow:hidden; position:relative; height:0; padding-top:47.88%; }
.main-bottom-bg{
	position:absolute; 
	top:0px; bottom:0px; left:0px; right:0px; 
	/* background:url(/images/main/main_company_intro_bg.jpg) no-repeat 50% 50%; */
	background-size:cover !important; 
	transition:transform 1s ease; 
	transform:scale(1.05); 
	z-index:0;
}
.main-bottom-bg.m-bg{display:none;}
[data-aos='bottom-in'].aos-animate .main-bottom-bg{transform:scale(1.0)  rotate(0.002deg)}

/* -------- 하단영역 :: 기업 소개 로고  -------- */
.main-company-intro-con{position:absolute; left:0; right:0; top:0; bottom:150px; z-index:1;  }
.main-company-intro-con .company-logo{position:absolute; bottom:80px; right:100px; }
/* Active */
[data-aos='bottom-company-in'] .company-logo{
	opacity:0;
}
[data-aos='bottom-company-in'].aos-animate .company-logo{
	-webkit-animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
		animation: text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@keyframes text-focus-in {
  0% {
	-webkit-filter: blur(12px);
		filter: blur(12px);
	opacity: 0;
  }
  100% {
	-webkit-filter: blur(0px);
			filter: blur(0px);
	opacity: 1;
  }
}
/* -------- 하단영역 :: 뉴스레터 -------- */
.main-newsletter-pr-con{position:absolute; bottom:0px; left:0px; right:0px; height:150px; z-index:2; }
.main-newsletter-con{float:left; width:63.65%; position:relative; height:150px; padding:45px 50px 45px 100px; box-sizing:border-box;}
.main-newsletter-con:before{position:absolute; top:0px; left:-150px; right:0px; height:100%; background-color:#000; opacity:0.5; content:"";}
.main-newsletter-con dl{position:relative; width:calc(100% - 200px); color:#fff;}
.main-newsletter-con dl dt,
.main-newsletter-con dl dd{overflow:hidden; display:inline-block; vertical-align:middle;}
.main-newsletter-con dl dt{font-size:42px; letter-spacing:-0.5px; font-weight:700; margin-right:4%}
.main-newsletter-con dl dt b{color:#5bb531;}
.main-newsletter-con dl dd{opacity:0.5; line-height:1.75; letter-spacing:-0.5px; font-size:16px;}
.newsletter-writer-btn{position:absolute; top:50%; right:50px; width:200px; height:60px; line-height:60px; box-sizing:border-box; transform:translateY(-50%)}

/* -------- 홍보영상보기 -------- */
.main-pr-con{float:right; width:36.35%; height:150px; padding:20px 100px 0 40px; background-color:#655b50; box-sizing:border-box;}
.main-pr-con dl{width:calc(100% - 205px); display:inline-block; vertical-align:middle; color:#fff;}
.main-pr-con dl dt{overflow:hidden; font-size:26px; font-weight:500; letter-spacing:-0.5px; }
.main-pr-con dl dd{overflow:hidden; font-size:16px; letter-spacing:-0.5px; opacity:0.5; margin-top:15px;}
.main-pr-con .main-pr-video-btn-box{display:inline-block;  vertical-align:middle;}
.main-pr-con .main-pr-video-btn-box a{display:block; position:relative;}
.main-pr-con .main-pr-video-btn-box .over-img{display:block; overflow:hidden;}
.main-pr-con .main-pr-video-btn-box .play-btn{position:absolute; top:50%; left:50%; z-index:1;}
/* 비디오 영역 play버튼 */
.main-pr-video-btn-box .play-btn {
	position:absolute;
	width:50px;
	height:50px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transition: all 0.5s ease;
}
.main-pr-video-btn-box .play-btn  svg{
	width:100%;
	height:100%;
}
.main-pr-video-btn-box .circle-bg {
  stroke: #fff;
  stroke-dasharray: 650;
  stroke-dashoffset: 0;
  -webkit-transition: all 0.5s ease-in-out;
  opacity: 0.2;
}
.main-pr-video-btn-box .circle {
  stroke: #fff;
  stroke-dasharray: 650;
  stroke-dashoffset: 650;
  -webkit-transition: all 0.5s ease-in-out;
  opacity: 0.2;
}
.main-pr-video-btn-box .play-btn .triangle {
  -webkit-transition: all 0.7s ease-in-out;
  stroke-dasharray: 240;
  stroke-dashoffset: 480;
  stroke: rgba(255,255,255,0.7);
  transform: translateY(0);
}
.main-pr-video-btn-box:hover .triangle {
  stroke-dashoffset: 0;
  opacity: 1;
  stroke: #fff;
  animation: nudge 0.7s ease-in-out;
}
.main-pr-video-btn-box:hover .circle {
  stroke-dashoffset: 0;
  opacity: 1;
}
@keyframes nudge {
	0% {
		transform: translateX(0);
	}
	30% {
		transform: translateX(-5px);
	}
	50% {
		transform: translateX(5px);
	}
	70% {
		transform: translateX(-2px);
	}
	100% {
		transform: translateX(0);
	}
}

/* Active */
[data-aos='bottom-in'] .hidden{display:inline-block; transform:translateY(100%); transition:transform 0.8s 0.3s; font-weight:inherit}
[data-aos='bottom-in'].aos-animate .hidden{transform:translateY(0); }
.newsletter-writer-btn,
.main-pr-con .main-pr-video-btn-box{
	opacity:0;
	clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
	transition: opacity 1s cubic-bezier(0, 0, 0.29, 1.07) 0.3s, clip-path 1s cubic-bezier(0, 0, 0.29, 1.07) 0.3s
}
[data-aos='bottom-in'].aos-animate .newsletter-writer-btn,
[data-aos='bottom-in'].aos-animate .main-pr-con .main-pr-video-btn-box{
	opacity: 1;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* -------- 뉴스레터 신청모달 -------- */
#newsLetterApplyCon{position:relative; max-width:1200px; margin:50px auto; background-color:#fff;}
#newsLetterApplyCon .modal-close-btn{top:40px; right:40px;}
#newsLetterApplyCon .modal-close-btn:before{display:none;}
#newsLetterApplyCon .modal-close-btn i{color:#2f2821;}
.newsletter-apply-inner{padding:90px 80px;}
.newsletter-apply-tit-box{text-align:center; color:#645c54 ;font-size:16px; letter-spacing:-0.5px; margin-bottom:38px;}
.newsletter-apply-tit-box .newsletter-apply-tit{font-size:2.25em; font-weight:200; margin-bottom:18px;}
.newsletter-apply-tit-box .newsletter-apply-tit b{font-weight:500;}
.newsletter-apply-tit-box p{opacity:0.7}

/* -------- 홍보영상 리스트 모달 -------- */
.video-list-wrapper{position:relative; max-width:1200px; margin:100px auto;}
.video-list-wrapper .video-item{height:0; position:relative; padding-top:56.25%;}
.video-list-wrapper .video-item iframe{position:absolute; top:0px; left:0px; width:100%; height:100%;}
/* 비디오리스트 :: 버튼 */
.video-arrow-controls button{position:absolute; top:50%; margin-top:-50px; width:100px; height:100px; border:1px solid #fff; border-color:rgba(255,255,255,0.25); border-radius:50%;}
.video-arrow-controls button i{font-size:48px; color:#fff; transition:all 0.5s}
.video-arrow-controls .video-prev-btn{left:-150px;}
.video-arrow-controls .video-next-btn{right:-150px;}
.video-arrow-controls .video-prev-btn:hover i{transform:translateX(-3px)}
.video-arrow-controls .video-next-btn:hover i{transform:translateX(3px)}
/* 비디오리스트 :: Dots */
.video-list-wrapper .slick-dots{margin-top:40px; text-align:center; z-index:11; }
.video-list-wrapper .slick-dots li{display:inline-block; width:20px; height:20px; margin:0 10px;}
.video-list-wrapper .slick-dots li button{
	cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:10px; height:10px; margin:5px; border:2px solid #fff; font-size:0; opacity:0.25;
	-webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
	transition:all 0.5s
}
.video-list-wrapper .slick-dots li.slick-active button{width:20px; height:20px; opacity:1.0; border-width:3px; margin:0}