div[class^="area_"] h2{font-size:45px; color:#111; text-align:center;}

/* animation */
.ani{position:relative; opacity:0; transition: all 0.8s ease-out 0s; transform:translate(0,20px);}
.ani.is-animate{opacity:1; transform:translate(0,0);}

.slideleft.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideleft{opacity: 0 !important;transform:translateX(-80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideRight.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideRight{opacity:0;transform: translateX(80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slidedown.is-animate{opacity:1; transform:translateY(0);}
.slidedown{opacity:0;transform: translateY(-100px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideUp.is-animate{opacity:1; transform:translateY(0);}
.slideUp{opacity:0;transform:translateY(80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideFirst{opacity:0;position:relative;animation: firstAni 0.8s ease 0s forwards;}
.slideFirstUp{opacity:0; position:relative;animation:firstAniUp 1.3s ease 0s forwards;}
.slideFirstRight{opacity:0; position:relative;animation:slideFirstRight 1.3s ease 0s forwards;}


/* visual */
.area_visual, 
.area_visual .list > li{position:relative; height: calc(100vh - 90px); max-height:850px; width:100% !important; background-position:50%; background-size:cover;}
.area_visual ul li .text{box-sizing: border-box; position:relative; width:1400px; margin:0 auto; padding-top:460px; color:#fff; }
.area_visual ul li .text > h2{line-height:1.2; margin-bottom:30px; font-size:18px; color:#fff; font-weight:700; text-align:left; letter-spacing:3px; animation: fade-in-bottom 1s 1 linear;}
.area_visual ul li .text > p{line-height:1.3; margin-bottom:30px; font-size:55px; font-weight:200; animation: fade-in-bottom 1.4s 1 linear;}
.area_visual ul li .text > p b{display:block}

.area_visual ul li .text .pg_area{margin-top:80px; text-align:center;}
.area_visual ul li .text .pg_area ul li{float:left; width:160px; margin-right:20px; text-align:left;}
.area_visual ul li .text .pg_area ul li p{opacity:0.5; margin-top:15px; font-size:16px; font-weight:bold; text-transform: uppercase}
.area_visual ul li .text .pg_area i{display:block; position:relative;  height:2px; width:100%; margin: 0 auto; background:rgba(255,255,255,0.3);}
.area_visual ul li .text .pg_area ul li.active i:after{content:""; position:absolute; opacity:0.9; top:0; left:0; width:0; height: 2px; background:#ececec; animation:linefill 4s 0s forwards;}
.area_visual ul li .text .pg_area ul li.active p{opacity:1}

.area_visual .bx-pager.bx-default-pager{z-index:90;width:1400px;margin:0 auto;text-align: right;}
.area_visual .bx-controls.bx-has-pager{z-index:80; position:absolute; top:50%; right:0; width:100%;}
.area_visual .bx-wrapper .bx-pager.bx-default-pager a{display: inline-block;width:20px;height:4px;margin:0;background:#fff;text-indent:-9999px;outline:0;font-size: 0;}
.area_visual .bx-wrapper .bx-pager.bx-default-pager a.active{width:35px; height:4px; background:#f8a356;}
.area_visual .bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {display:block; vertical-align:top;}

.area_visual .scrolldown{position:absolute; right:13%; bottom:0; margin-left:-9px; z-index:90;}
.area_visual .scrolldown span{display:block; color:#fff; font-size:12px; font-weight:500; margin-bottom:30px; letter-spacing:0.5px; transform:rotate(90deg); } 
.area_visual .scrolldown i{display:block; position:relative; width:1px; height:50px; margin:10px auto 0; background:rgba(255,255,255,0.4);}
.area_visual .scrolldown i:before{content:''; display:block; position:absolute; top:0; left:0; width:1px; height:6px; background:#fff; animation:scroll 2s infinite; border-radius:50%;}

*[lang="en"] .area_visual ul li .text > h2{font-weight:300}
*[lang="en"] .area_visual ul li .text > p{width:85%; font-size:35px; font-weight:700}

/* 애니메이션 */
@keyframes linefill{0%{width:0%;}100%{width:100%;}}
@keyframes bounce{0%, 15%, 38%, 60%, 75% {transform: translateY(0);}30%{transform: translateY(10px);}45%{transform: translateY(5px);}}
@keyframes bounce2{0%, 60% {transform: translateY(0);}20%, 80%{transform: translateY(4px);} 40%, 100%{transform: translateY(-2px);}}
@keyframes scroll{
	0%{top:0;}
	100%{top:100%;}
}

/* 회사소개 */
.area_company{padding:120px 0; text-align:center;}
.area_company > div > h2{margin-bottom:60px; line-height: 1.4; color:#111;}
.area_company > div > p{line-height:1.8; margin:30px 0 60px 0; font-size:18px; color:#444}
.area_company .cont {display: flex; justify-content: space-between;}
.area_company .cont a h3{margin-top:20px; font-weight:800; font-size:20px; color:#111}
.area_company .cont .img{height:450px;}
.area_company .comapny{position:relative; width:55%;}
.area_company .comapny ul{position:absolute; left:-65px; top:30px;}
.area_company .comapny ul li{width:0; height:30px; margin-bottom:10px; transition:1s}
.area_company .comapny ul li:first-child{background:#f6851e}
.area_company .comapny ul li:nth-child(2){background:#4a72b7}
.area_company .comapny ul li:last-child{background:#808183}
.area_company .comapny.active ul li{width:130px; transition:1s}


.area_company .video{position:relative; width:40%;}

.area_company .video .img{ width:100%;background:#f6f6f6;}
.area_company .video .img p{display:flex;align-items: center;justify-content: center;height: 100%;}

/* 회사소개 */
.area_business {overflow:hidden; box-sizing:border-box; position:relative; width:100%; padding:120px 0; color:#333;}
.area_business:before{z-index: -1; content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:#f6f6f6;}
.area_business .wrapper{position:relative; height:542px; overflow:hidden;}
.area_business h2{margin-bottom:30px; text-align:center;}
.area_business > p{line-height:1.8; margin-bottom:60px; font-size:18px; text-align:center;}

.area_business .wrapper:before, .area_business ul > li:before,
.area_business .wrapper:after{content:''; z-index:-1; position:absolute; left:0; top:0; bottom:0; width:100%; height:100%; }
.area_business .wrapper:before, .area_business ul > li:before {background:url(../images/main/business_bg03.jpg) no-repeat 50% 50%;-webkit-transition:all ease 1.0s;transition:all ease 1.0s;}

.area_business ul{display: flex; flex-direction: column; justify-content: space-between; height:542px; text-align:center;}
.area_business ul > li{width:100%; height:100%; text-align:left; background:rgba(0,0,0,0.1)}
.area_business ul > li:hover{background: rgb(246, 133, 30, 0.8);}
.area_business ul > li a{display: flex;width:100%;height:100%;padding: 40px;color:#fff;flex-direction: column;align-items: flex-start;justify-content: flex-end;}
.area_business ul > li:nth-child(1):before{background-image:url(../images/main/business_bg03.jpg);}
.area_business ul > li:nth-child(2):before{background-image:url(../images/main/business_bg01.jpg);}
.area_business ul > li:nth-child(3):before{background-image:url(../images/main/business_bg02.jpg);}
.area_business ul > li:before{opacity:0; transform:scale(1)}
.area_business ul > li.active:before{opacity:1; -ms-transform:scale(1.1);}
.area_business ul > li img{height:35px; margin-bottom:10px;}
.area_business ul > li a p{line-height: 1; font-size:20px; font-weight:600}

/* product */
.area_m_product{position:relative; padding:120px 0 150px 0; text-align: center;}
.area_m_product > div > a{opacity: 0.7; display:flex; align-items: center; justify-content: center; margin:40px 0 60px 0; font-size:17px;}
.area_m_product > div > a img{margin-left:15px;}
.area_m_product ul{display: flex; justify-content: space-between; background:#fff; padding:0 30px 45px 30px;}
.area_m_product ul li{width:23%;}
.area_m_product ul li a img{position:relative; width:100%;}
.area_m_product ul li a div{position:relative; width:100%;}
.area_m_product ul li a div:before{content:''; z-index: 1; display:block; position:absolute; left:0; top:0; width:0; height:100%; background:rgb(246, 133, 30, 0.7); transition:0.5s}
.area_m_product ul li a div:after{opacity:0; content:'+'; z-index:2; position:absolute; left:50%; top:50%; transform:translate(-50% , -50%); color:#fff; font-size:40px; transition:0.5s}
.area_m_product ul li a:hover div:before{width:100%; transition:0.5s}
.area_m_product ul li a:hover div:after{opacity:1; transition:0.5s }
.area_m_product ul li h3{margin-top:14px; font-size:20px; text-align:center;}

.area_m_product .image{z-index:-1; position:absolute; left:0; bottom:0; background:url(../../images/main/product_bg2.jpg) no-repeat center bottom; width:100%; height:380px; opacity:0; transition:1s; }
.area_m_product .image.active{opacity:1; transition:1s}
.area_m_product .image:before{content:""; display:block; position:absolute; top:0; right:0; z-index:999; width: 100%; height: 100%; background: #fff; transition: all 3s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s}
.area_m_product .image.active:before{width:0;}

.area_m_product .wrapper{position:relative;}
.area_m_product .line{position:absolute; right:0; top:-180px;}
.area_m_product .line span{display:block; float: left; width:30px; height:0; margin-left:10px; transition:1s}
.area_m_product .line .line01{background:#f6851e}
.area_m_product .line .line02{background:#4a72b7}
.area_m_product .line .line03{background:#808183}
.area_m_product .line.active span{height:130px;}


/* notice */
.area_notice{padding:120px 0; background:url(../../images/common/is.svg) no-repeat right bottom; background-size:250px}
.area_notice h2{margin-bottom:60px;}
.area_notice ul{display: flex; justify-content: space-between;}
.area_notice ul li{width:31%}
.area_notice ul li a b{font-size:18px; color:#02b9c7;text-decoration: underline;}
.area_notice ul li a h3{overflow:hidden; height:33px; margin:20px 0; font-size:22px; color:#111; white-space: nowrap; text-overflow: ellipsis; transition:0.5s }
.area_notice ul li a p{ font-size:17px; color:#777; display:-webkit-box; overflow:hidden; max-height:50px; height:50px; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; word-break:keep-all;}
.area_notice ul li a span{display:block; margin-top:25px; padding-top:25px; border-top:2px solid #f4f4f4; color:#999}
.area_notice ul li a:hover h3{color:#888}


/* quick */
.area_quick{opacity:0; z-index:90; position:fixed; right:0; bottom:16%; transition: all 0.5s ease-out 0.2s;}
.area_quick ul li{display: flex; flex-direction: column; justify-content: center; width:110px; height:110px; margin-bottom:1px; text-align:center;}
.area_quick ul li:first-child{background: #f6851e;}
.area_quick ul li:nth-child(2){background: #4a72b7;}
.area_quick ul li:nth-child(3){background: #808183;}
.area_quick ul li:last-child{height:auto; background:#111;}
.area_quick ul li a{color:#fff;}
.area_quick ul li a img{height:35px;}
.area_quick ul li a p{margin-top:8px; color:#fff;}
.area_quick ul li:last-child p{margin:8px 0}
.moved .area_quick{opacity:1;visibility: visible;}
.fix_bottom .area_quick{visibility: hidden; opacity:0}


@media screen and (max-width:1440px){
	.area_visual .bx-pager.bx-default-pager,
	.area_visual ul li .text{width:96%;}

	.area_visual .scrolldown{right:0; margin-left:0}
}

@media screen and (max-width:980px){
	.area_visual ul li .text > p{font-size:40px;}
	div[class^="area_"] h2{font-size:35px;}
	
	.area_company .cont .img{height:300px;}
	
	.area_company .comapny ul li,
	.area_company .comapny.active ul li{height:10px;}
	
	.area_m_product .line.active span{width:10px; height:70px;}
	.area_m_product .line span{width:10px; height:0;}
	
	.area_business ul > li{width:100%; background: rgba(0,0,0,0.3);}
	.area_business ul > li a{align-items: center; justify-content: center;}
	
	.area_m_product ul {display: flex; flex-wrap: wrap;}
	.area_m_product ul li{width:49%; margin-bottom:35px;}

}

@media screen and (max-width:767px){
	.area_visual, 
	.area_visual .list > li{height: calc(100vh - 70px);}
	.area_visual ul li .text{position:absolute; left:0; top:50%; width:100%; padding-top:0; transform: translateY(-50%);}
	.area_visual ul li .text > p{font-size:23px; text-align:center;}
	.area_visual ul li .text > h2{margin-bottom:20px; font-size:14px; text-align:center;}
	.area_visual ul li .text .pg_area ul li p{font-size:13px;}
	.area_visual ul li .text .pg_area ul li{width:120px;}

	*[lang="en"] .area_visual ul li .text > p{width:70%; margin:0 auto; font-size:20px; text-align:center;}

	.area_visual .bx-controls.bx-has-pager{top:40%; margin-top:-50px;}
	.area_visual .bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item{display:inline-block; margin-right:10px;}
	.area_visual .bx-pager.bx-default-pager{text-align:center;}
	.area_visual .bx-wrapper .bx-pager.bx-default-pager a.active{width:2px; height:15px;}
	.area_visual .bx-wrapper .bx-pager.bx-default-pager a{width:2px; height:15px;}
	.area_visual ul li .text .pg_area{display:none;}
	
	.area_business,
	.area_company{padding:60px 0;}
	div[class^="area_"] h2,
	.area_business h2,
	.area_company > div > h2{font-size:20px;}
	
	.area_business h2{margin-bottom:15px;}
	.area_business > p{padding:0 2%; margin-bottom:30px; font-size:14px;}
	.area_company > div > p{margin:15px 0 30px 0; font-size:14px;}
	.area_business > p br,
	.area_company > div > p br{display:none;}
	.area_company .cont a h3{font-size:15px;}
	.area_company .cont .img{height:200px;}
	.area_company .comapny ul{display:none;}
	
	.area_company .cont{display:block;}
	.area_company .comapny{width:100%; margin-bottom:30px;}
	.area_company .video{width:100%;}

	.area_business ul > li a p{font-size:14px;text-align: center;}
	
	.area_m_product .line{top:-95px;}
	.area_m_product{padding:60px 0;}
	.area_m_product > div > a{font-size:14px;}
	.area_m_product ul{padding:0 15px;}
	.area_m_product ul li h3{font-size:15px;}
	.area_m_product > div > a{margin:25px 0 30px 0}
	
	.area_notice{padding:60px 0; background-size:120px;}
	.area_notice h2{margin-bottom:15px;}
	.area_notice ul{display:block;}
	.area_notice ul li{width:100%; padding-bottom:20px; border-bottom:1px solid #f4f4f4;}
	.area_notice ul li:first-child{border-top:1px solid #f4f4f4;}
	.area_notice ul li a h3{margin-bottom:7px; font-size:15px; font-weight:bold;}
	.area_notice ul li a b{display:none;}
	.area_notice ul li a p{font-size:14px;}
	.area_notice ul li a span{padding-top:0; margin-top:10px; border:0; font-size:12px;}


}


@media screen and (max-width:600px){
	.area_business .wrapper,
	.area_business ul{height:auto;}
	
	.area_business ul{flex-direction: row;}
	.area_business .wrapper:before, .area_business ul > li:before{}

	.area_m_product .line{top:-90px;}
}

@media screen and (max-width:500px){
	.area_visual ul li .text > p{line-height:1.6; margin-bottom:0; font-size:20px;}
	.area_company .cont .img{height:250px;}

	.area_business ul > li{height:150px;}

	div[class^="area_"] h2, .area_business h2, .area_company > div > h2{margin-bottom:30px; font-size:18px;}
	
	
}

@media screen and (max-width:413px){
	.area_comapny .cont .text span br,
	.area_company > div > h2 br{display:none;}
}

@media screen and (max-width:375px){
	.area_visual ul li .text > h2{margin-bottom:10px; font-size:12px;}
	.area_visual ul li .text > p{font-size:16px;}

	div[class^="area_"] h2, .area_business h2, .area_company > div > h2{font-size:16px;}
}