@charset 'utf-8';
/*
  CUBEA 큐브에이
  작성일 :2017-09-21 17:35:55
  작성자 :이준경 ( ljk3391@cubea.co.kr )
*/

html#mainWrap,
#mainWrap body{height:100%}
#mainWrap #ui_body{height:100%}
#mainWrap #ui_foot{position:absolute;bottom:0;left:12%;padding-bottom:40px;z-index:10;width:auto;border-top-width:0}
#mainWrap .main_page{position:relative;height:100%;min-width:1280px}
#mainWrap .main_page #ui_head{position:absolute;top:0;left:0;width:100%}
#mainWrap .main_page .container{position:relative;padding:0;height:100%;width:auto}


/* 화살표 */
.main_page .slide-b-box{position:relative;margin:0 auto;width:1680px}
.main_page .slide-btns{position:absolute;top:50%;left:0;margin-top:-20px;height:0px;width:100%;z-index:5}
.main_page .slide-btns button{width:100%;height:100%;text-indent:-9999px;background:center center no-repeat;transition: background 0.3s, opacity 0.3s;-webkit-transition: background 0.3s, opacity 0.3s}
.main_page .slide-btns button.hidden{opacity:0.3;cursor:default}
.main_page .slide-btns .p,
.main_page .slide-btns .n{display:block;width:150px;height:100px}
.main_page .slide-btns .p{float:left;margin-left:80px}
.main_page .slide-btns .n{float:right;position:relative;margin-right:80px}
.main_page .slide-btns .p button{background-image:url("../img/s_p_icon.png")}
.main_page .slide-btns .n button{background-image:url("../img/s_n_icon.png")}
.main_page .slide-btns .n button:hover{background-position:right center}
.main_page .slide-btns .p button:hover{background-position:left center}
.main_page .slide-btns button.hidden:hover{background-position:center center}


/*       main         */
.main-page01{position:relative}
.main-page01 #ui_foot .scroll-btn{display:none}
.main01{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;opacity:1;z-index:2;
	transition: opacity 0.3s;-webkit-transition: opacity 0.3s}
.main01 .container {position: relative}
.main01 .main-title{position:absolute;top:340px;left:22%;width:760px;height:290px}
.main01 .main-title img{position:fixed;right:-50px;bottom:-50px;width:300px;z-index:8}
.main01 .main-title h3{height: 290px;font-size:86px;color:#403a36;line-height: 72px;letter-spacing: -0.25px}
.main01 .main-title h3 span{display: inline-block;width:238px;color:#9b938b;background:url("../img/main_dot_icon.png") no-repeat right bottom;zoom:1}
.main01 .slide-btns .n button{background-image:url("../img/slide_next_icon.png")}


/*       main2        */
.main-page02 {position: relative}
.main-page02 #ui_head .menu .company_pdf a{color:#fff}
.main-page02 #ui_head .menu .company_pdf:after{background-image:url("../img/brochure_icon2.png")}
.main-page02 #ui_head .top .gnb-box a{color:rgba(255, 255, 255, 0.6)}
.main-page02 #ui_head .top .gnb-box a:after{color:#fff}
.main-page02 #ui_head .top h1 a{background:url("../img/cubea_logo2.png") no-repeat center}
.main-page02 #ui_head .top ul li a{color:rgba(255, 255, 255, 0.8)}
.main-page02 #ui_head .top ul li a:after{color:#fff}
.main-page02 #ui_head .top ul li a:before{background-color:#fff}
.main-page02 #ui_head .top ul li:after{background-image:url("../img/brochure_icon2.png");opacity:0.8}
.main-page02 #ui_head .top ul li.top-right-i:after{background-image:url("../img/intranet_icon2.png");opacity: 0.8}
.main-page02 #ui_foot .scroll-btn{display:none}

/* 슬라이드 */
.main02 {position:relative;height:100%;background-color:#fff;opacity:0;z-index:1;
	transition: opacity 0.6s;-webkit-transition: opacity 0.6s}
.main-page02 .main02{opacity:1;z-index:2}
.main-page02 .main01{opacity:0;z-index:1}
.main02 .slide-btns{opacity:0;}
.main02 .main_slide {overflow: hidden;width:100%;height:100%}
.main02 .main_slide .train{position:relative;width:100%;height:100%;text-align:center;z-index:1}
.main02 .main_slide .train .main-s{display:block}
.main02 .main_slide .train .main-s button{display:block;position:fixed;top:92%;left:50%;width:110px;height:110px;z-index:20;opacity:0.5;overflow:hidden;
transition: opacity 0.4s, margin-top 0.4s;-webkit-transition: opacity 0.4s, margin-top 0.4s}
.main02 .main_slide .train .main-s.main-s1 button{margin-left:-300px}
.main02 .main_slide .train .main-s.main-s2 button{margin-left:-135px}
.main02 .main_slide .train .main-s.main-s3 button{margin-left:25px}
.main02 .main_slide .train .main-s.main-s4 button{margin-left:200px}
.main02 .main_slide .train .main-s button:hover{opacity:1;margin-top:-15px}
.main02 .main_slide .train .main-s button img{width:100%;height:100%}
.main02 .main_slide .train .main-s .container{display:block;position:relative;margin:0;z-index:1}
.main02 .main_slide .train .main-s .container img{opacity:0}
.main02 .main_slide .train .main-s > img{position:absolute;bottom:0;right:0;z-index:6}
.main02 .main_slide .train .main-s .d{position:relative;width:110%;height:110%;background:center center no-repeat;background-size:cover;z-index:1;margin-top:-20px;margin-left:-20px}
.main02 .main_slide .train .main-s .d span{opacity:0.8;display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:center center no-repeat;background-size:100% 100%;z-index:2}
.main02 .main_slide .train .main-s .d span:after{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:center center no-repeat;background-size:100% 100%;
	transition: opacity 0.2s;-webkit-transition: opacity 0.2s}
.main02 .main_slide .train .main-s a{display:inline-block;position:absolute;top:200px;left:22%;margin-top:-130px;padding-top:130px;width:49%;height:600px;text-align:left;opacity:0;z-index:10;
	transition: opacity 0.8s cubic-bezier(0.75,0.1,0.25,1), margin-top 1s cubic-bezier(0.75,0.1,0.25,1);-webkit-transition: opacity 0.8s cubic-bezier(0.75,0.1,0.25,1), margin-top 1s cubic-bezier(0.75,0.1,0.25,1);-webkit-transition-delay: 0.6s;transition-delay: 0.6s}
.main02 .main_slide .train .main-s a h3{margin-bottom:40px;font-size:80px;color:#fff;line-height:1.1em}
.main02 .main_slide .train .main-s a h3.kr{font-size:70px}
.main02 .main_slide .train .main-s a strong{display:block;font-size:32px;color:#fff;letter-spacing:-0.5px;line-height:1em}
.main02 .main_slide .train .main-s a span{padding:16px 0 116px;display:block;font-size:22px;color:#fff}
.main02 .main_slide .train .main-s.main-s1 .d span{background-image:url("../img/main_bg.png")}
.main02 .main_slide .train .main-s.main-s2 .d span{background-image:url("../img/main_bg.png")}
.main02 .main_slide .train .main-s.main-s3 .d span{background-image:url("../img/main_bg2.png")}
.main02 .main_slide .train .main-s.main-s4 .d span{background-image:url("../img/main_bg3.png")}
.main02 .main_slide .train .main-s.on{display:block;position:absolute;top:0;left:0;margin:0;width:100%;height:100%;z-index:2}
.main02 .main_slide .train .main-s.on .d span{position:fixed}
.main02 .main_slide .train .main-s.on .container{z-index:2}
.main02 .main_slide .train .main-s.on button{margin-top:0;opacity:0.2}
.main02 .main_slide .train .main-s.on button:hover{opacity:0.2}
.main02 .main_slide .train .main-s.on a{margin-top:0;opacity:1}
.main02 .main_slide .train .main-s.hide{}
.main02 .main_slide .train .main-s.hide .d:after{opacity:0}
.main02 .main_slide .train .main-s em.award{position:absolute;bottom:80px;right:200px;width:85px;height:113px;z-index:5}
.main02 .main_slide .train .main-s em.award img{display:block;width:100%;opacity:1}

/* 슬라이드버튼 */
.main02 .main-control-box{position:absolute;bottom:50px;left:0;width:100%}
.main02 .main-control-box .s-control{position:relative;text-align:center;z-index:2}
.main02 .main-control-box .s-control li{display:inline-block;vertical-align:top}  
.main02 .main-control-box .s-control li a{display:block}
.main02 .main-control-box .s-control li a img{width:50px;height:auto}
.main02 .main-control-box .s-control li a.on{opacity:1}



@media all and ( max-width:640px ){
	#mainWrap #ui_foot{left:20px;padding:20px 0}
	#mainWrap .main-page01 #ui_foot{z-index:1}

	/* Main GNB */
	.main-page02 #ui_head .m_menu.open button{background-image: url("../img/m_btn_x.png")}
	.main-page02 #ui_head .menu .gnb-box li a,
	.main-page02 #ui_head .menu .gnb-box li a:hover{color:#767676}
	.main-page02 #ui_head .top .gnb-box a:after{color:#000}

	/* MAIN */
	#mainWrap .main_page{min-width:320px}
	#mainWrap #ui_head{background:none}
	#mainWrap #ui_wrap{padding-top:0;overflow:hidden}
	
	.main01,
	.main02{min-width:320px}
	.main01{display:block;position:absolute;top:58px;left:0;width:100%;overflow:hidden}
	.main02{position:relative}
	.main01 .slide-btns{width:100%;height:auto;margin-top:0;top:165px;opacity:1}
	.main01 .slide-btns.hidden{right:-150px;opacity:0}
	.main01 .slide-btns button{width:100%;height:100%;text-indent:-9999px}
	.main01 .slide-btns .n{position:relative;margin-right:0}
	.main01 .slide-btns .n button{margin-right:0;background:url("../img/m/slide_next_icon.png") center center no-repeat;background-size:37px auto}
	.main01 .main-title{position:static;padding-top:80px;width:auto}
	.main01 .main-title h3{display:block;margin:0 20px;height:auto;font-size:34px;line-height:31px;letter-spacing:-1px}
	.main01 .main-title h3 span{position:relative;display:block;width:auto;background:none}
	.main01 .main-title h3 span:after{content:"";display:inline-block;width:15px;height:27px;background:url("../img/main_dot_icon.png") center bottom no-repeat;background-size:8px auto;vertical-align:Top}
	.main01 .main-title img{display:block;position:fixed;right:-90px;bottom:-80px;width:220px;opacity:1}
	.main01 .main-title img.move{
		animation-name:myfirst;
		animation-duration:8s;
		animation-timing-function:linear;
		animation-iteration-count:infinite;
		animation-play-state:running;
		/* Firefox:*/
		-moz-animation-name:myfirst;
		-moz-animation-duration:8s;
		-moz-animation-timing-function:linear;
		-moz-animation-iteration-count:infinite;
		-moz-animation-play-state:running;
		/* Safari and Chrome:*/
		-webkit-animation-name:myfirst;
		-webkit-animation-duration:8s;
		-webkit-animation-timing-function:linear;
		-webkit-animation-iteration-count:infinite;
		-webkit-animation-play-state:running;
	}
	@keyframes myfirst{
		from {transform:rotate(0deg)}
		to {transform:rotate(360deg)}
	}
	@-moz-keyframes myfirst /* Firefox */{
		from {-moz-transform:rotate(0deg)}
		to {-moz-transform:rotate(360deg)}
	}
	@-webkit-keyframes myfirst /* Safari and Chrome */{
		from {-webkit-transform:rotate(0deg)}
		to {-webkit-transform:rotate(360deg)}
	}
	.main-page02{position:relative}
	.main-page02 #ui_head .top h1 a{background-image:url("../img/cubea_logo2.png");background-size:100% auto}
	.main-page02 #ui_head .top ul li a:before{background-color:#9b938b}
	.main-page02 #ui_head .top span button{background-image:url("../img/gnb_wh.png")}
	.main-page02 .main01{display:none}
	.main-page02 #ui_head .menu .company_pdf a{color:#000}
	.main-page02 #ui_head .menu .company_pdf:after{background-image:url("../img/brochure_icon1.png")}

	.train{display:block;position:relative}
	.train:after{content:"";display:block;clear:both}
	.train .slick-list{overflow:hidden}
	.train .main-s{opacity:1 !important}
	.main02 .main_slide{}
	.main02 .main_slide .train{height:auto}
	.main02 .main_slide .train:after{content:"";display:block;position:absolute;left:0;bottom:-1px;width:100%;height:12%;background:url("../img/m/main_bg.png") left bottom no-repeat;background-size:100% 100%;z-index:15}
	.main02 .main_slide .train .main-s,
	.main02 .main_slide .train .main-s.on{display:none;float:left;overflow:hidden}
	.main02 .main_slide .train .main-s:first-child,
	.main02 .main_slide .train.slick-slider .main-s{display:block}
	.main02 .main_slide .train .main-s.on{position:relative}
	.main02 .main_slide .train .main-s .container{margin:0;width:100%;height:auto}
	.main02 .main_slide .train .main-s .container img{display:block;position:relative;margin-left:-30%;width:160%;max-width:160%;z-index:1;opacity:0.5}
	.main02 .main_slide .train .main-s .d{display:block;position:absolute;left:0 !important;top:0 !important;width:100%;height:100%;margin:0;z-index:4}
	.main02 .main_slide .train .main-s.on .d span,
	.main02 .main_slide .train .main-s .d span{position:absolute;background-image:none !important}
	.main02 .main_slide .train .main-s .d span:after{display:none}
/*	.main02 .main_slide .train .main-s.first .d{margin-top:-60px !important;opacity:0 !important}*/
	.main02 .main_slide .train .main-s a{display:block;top:0;left:0;padding-top:0;margin:30px 0 0 0;width:100%;height:100%;opacity:1}
	.main02 .main_slide .train.slick-slider .main-s.on a,
	.main02 .main_slide .train.slick-slider .main-s a{margin:-60px 0 0 0;opacity:0;z-index:5;
		-webkit-transition:margin-top 0.6s cubic-bezier(.76,.01,.19,.99), opacity 0.6s cubic-bezier(.76,.01,.19,.99);
				transition:margin-top 0.6s cubic-bezier(.76,.01,.19,.99), opacity 0.6s cubic-bezier(.76,.01,.19,.99);
		-webkit-transition-delay:0.3s;
				transition-delay:0.3s;
	}
	.main02 .main_slide .train .main-s.on.slick-active a,
	.main02 .main_slide .train .main-s.slick-active a{margin-top:0;opacity:1}
	.main02 .main_slide .train .main-s a h3{margin:130px 0 10px 20px;width:80%;font-size:30px;line-height:1.2em}
	.main02 .main_slide .train .main-s a strong{margin:0 20px;font-size:18px;line-height:1em;letter-spacing:-0.5px;color:#fff}
	.main02 .main_slide .train .main-s a span{margin:0 20px;padding:10px 0 25px;font-size:14px;line-height:14px;color:#fff}
	.main02 .main_slide .train .main-s button{display:none}
	.main_page .main02 .slide-btns{display:none}
	.train .slick-dots{display:block;position:absolute;left:20px;top:340px}
	.train .slick-dots:after{content:"";display:block;clear:both}
	.train .slick-dots li{float:left;margin-right:5px;width:7px;height:7px}
	.train .slick-dots li button{display:block;width:100%;height:100%;background-color:#fff;opacity:0.4;text-indent:-9999px;border-radius:1px;
		-webkit-transition:opacity 0.6s;
				transition:opacity 0.6s;
	}
	.train .slick-dots li.slick-active button{opacity:1}
	.main02 .main_slide .train .main-s em.award{bottom:14%;right:20px;width:50px;height:70px}
	.main02 .main_slide .train .main-s em.award img{opacity:1;margin:0}
	
}