@charset "euc-kr";

html {min-width:1140px;}
body.eyeclon-ui {position:relative;}

.intro{width:100%;height:100%;background:#fff;position:fixed;z-index:9000;opacity:1;
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	-ms-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;}
.intro.end {opacity:0;}
/*.intro img{width:100%;position:absolute;left:0;top:0;display:none;}*/
.intro .loading {position:absolute;left:0;top:0;width:100%;height:100%;display:none;}
.intro .loading .title {position:absolute;left:50%;bottom:62px;width:113px;height:22px;margin-left:-56px;}
.intro .loading1 {background:#000 url(../images/inc/loading_visual01.jpg) no-repeat center;display:block;}
.intro .loading2 {background:#F15930 url(../images/inc/loading_visual02.jpg) no-repeat center;}
.intro .loading3 {background:#FFCC00 url(../images/inc/loading_visual03.jpg) no-repeat center;}
.intro .loading1 .title {background:url(../images/inc/loading_title01.jpg) no-repeat center;}
.intro .loading2 .title {background:url(../images/inc/loading_title02.jpg) no-repeat center;}
.intro .loading3 .title {background:url(../images/inc/loading_title03.jpg) no-repeat center;}

.eyeclon-ui-loading {width:100%;height:100%;background:#898989;position:fixed;z-index:9100;opacity:1;
	-webkit-transition: -webkit-transform .3s ease-out, background-color .3s;
	-moz-transition: -moz-transform .3s ease-out, background-color .3s;
	-ms-transition: -ms-transform .3s ease-out, background-color .3s;
	-o-transition: -o-transform .3s ease-out, background-color .3s;
	transition: transform .3s ease-out, background-color .3s;
}
.eyeclon-ui-loading .icon {border-radius:49px 40px 49px 49px;width:98px;height:98px;display:block;position:absolute;top:50%;left:50%;margin-left:-49px;margin-top:-118px;background:url(../images/loading/icon.png) no-repeat center top;
	-webkit-transition: background-position .3s ease-out;
	-moz-transition: background-position .3s ease-out;
	-ms-transition: background-position .3s ease-out;
	-o-transition: background-position .3s ease-out;
	transition: background-position .3s ease-out;}
.eyeclon-ui-loading .des {display:block;width:594px;height:68px;position:absolute;left:50%;margin-left:-297px;top:50%;margin-top:20px;background:url(../images/loading/des.png) no-repeat center top;
	-webkit-transition: background-position .3s ease-out;
	-moz-transition: background-position .3s ease-out;
	-ms-transition: background-position .3s ease-out;
	-o-transition: background-position .3s ease-out;
	transition: background-position .3s ease-out;}
.eyeclon-ui-loading .company {display:block;width:113px;height:22px;position:absolute;bottom:62px;left:50%;margin-left:-56px;background:url(../images/loading/company.png) no-repeat;}

.eyeclon-ui-loading.frame1 {background-color:#f15931;}
.eyeclon-ui-loading.frame1 .icon {background-position:center -98px;}
.eyeclon-ui-loading.frame1 .des {background-position:center -68px;}

.eyeclon-ui-loading.frame2 {background-color:#000;}
.eyeclon-ui-loading.frame2 .icon {background-position:center -196px;}
.eyeclon-ui-loading.frame2 .des {background-position:center -136px;}

.eyeclon-ui-loading.end {
	-webkit-transform: translate3d(0, -100%, 0);
	-moz-transform: translate3d(0, -100%, 0);
	-ms-transform: translate(0, -100%);
	-o-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);}

#content-wrap {background:#fff;height:auto;position:relative;z-index:1000;margin-top:10000px;}
#header.mainVisual {z-index:500;position:fixed;height:100%;width:100%;left:0;top:0;min-width:1140px;}
#header.mainVisual .formobile {display:none;}
.sub #header.mainVisual {z-index:auto;height:100% !important;}
.mobile .sub #header.mainVisual {z-index:auto;height:910px !important;}
.mobile #header.mainVisual {height:800px;}
.mobile #header.mainVisual .formobile {display:block;opacity:1;}
.mobile #header.mainVisual .eyeclon-ui-circle-loading {visibility: hidden;}

#container-wrap {position:relative;width:100%;z-index:9;min-height:100%;}

#content-wrap .banners {position:relative;height:3850px;}
#content-wrap .banners .banner {position:fixed;left:0;width:100%;height:1050px;z-index:1001;min-width:1140px;}
#content-wrap .banners .banner01 {top:0;z-index:1001;}
#content-wrap .banners .banner02 {top:0;z-index:1002;}
#content-wrap .banners .banner03 {top:0;z-index:1003;height:700px;}
#content-wrap .banners .banner04 {top:0;z-index:1005;}

.mobile #content-wrap .banners {position:relative;margin-top:120px;}
.mobile #content-wrap .banners .banner01 {position:absolute;}
.mobile #content-wrap .banners .banner02 {position:absolute;top:1050px;}
.mobile #content-wrap .banners .banner03 {position:absolute;top:2100px;}
.mobile #content-wrap .banners .banner04 {position:absolute;top:2800px;}

.mobile .main .banners .banner01 .content {top:335px;margin-left:-450px;}
.mobile .main .banners .banner02 .content {top:335px;margin-right:-450px;}
.mobile .main .banners .banner03 .content {top:0;}
.mobile .main .banners .banner04 .content {top:205px;margin-left:-450px;}

.third.next .third1 {position:fixed;}

.main .header .mainMenu .frame {height:35px;}
#header.mainVisual .header-visual {position:fixed;bottom:70px;display:block;}
.sub #header.mainVisual .header-visual {bottom:0;}
#header.mainVisual .header-visual .video-play {overflow:hidden;}
#header.mainVisual .header-visual {z-index:500;
	-webkit-transition: -webkit-transform .6s ease-out;
	-moz-transition: -moz-transform .6s ease-out;
	-ms-transition: -ms-transform .6s ease-out;
	-o-transition: -o-transform .6s ease-out;
	transition: transform .6s ease-out;}
#header.mainVisual .header-visual.first {z-index:1000;}
#header.mainVisual .header-visual.second {
	-webkit-transform: translate3d(100%, 0, 0);
	-moz-transform: translate3d(100%, 0, 0);
	-ms-transform: translate(100%, 0);
	-o-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
}
#header.mainVisual.his-story .header-visual.first {z-index:500;
	-webkit-transform: translate3d(-100%, 0, 0);
	-moz-transform: translate3d(-100%, 0, 0);
	-ms-transform: translate(-100%, 0);
	-o-transform: translate3d(-100%, 0, 0);
	transform: translate3d(-100%, 0, 0);
}
#header.mainVisual.his-story .header-visual.second {z-index:1000;
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#header.mainVisual .btn-play {z-index:1200;}

#header.mainVisual .btn-sound {display:block;width:40px;height:40px;position:fixed;bottom:78px;left:50%;margin-left:-20px;z-index:1200;background:url(../images/main/sound.png) no-repeat center top;}
#header.mainVisual .btn-sound.on {background-position:center -40px;}
.mobile #header.mainVisual .btn-sound {display:none;}

.sub.product.eyeclon-ui header {z-index:9000;position:fixed;}
.sub.product.eyeclon-ui .visual {overflow:visible !important;top:0;position:fixed; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate(0,0); -o-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
.sub.product.eyeclon-ui .visual .frame {max-width:none;width:100%;height:100%;}
.sub.product.eyeclon-ui .visual .frame .image-wrap {width:100%;height:100%;overflow:hidden;}
.sub.product.eyeclon-ui .visual .frame .image {position:relative;width:1000%;height:100%;
	/*-webkit-transition: -webkit-transform .6s ease-out;*/
	/*-moz-transition: -moz-transform .6s ease-out;*/
	/*-ms-transition: -ms-transform .6s ease-out;*/
	/*-o-transition: -o-transform .6s ease-out;*/
	/*transition: transform .6s ease-out;*/
}
.sub.product.eyeclon-ui .visual .frame .image li {width:100%;height:100%;float:left;position:relative}
.sub.product.eyeclon-ui .visual .frame .image li canvas {width:100%;height:100%;}
.sub.product.eyeclon-ui .visual .frame .image li .message {position:absolute;left:0;right:0;top:121px;bottom:70px;z-index:100;}
.sub.product.eyeclon-ui .visual .frame .image li .message.right {text-align:right;}
.sub.product.eyeclon-ui .visual .frame .image li .message .in {position:absolute;width:100%;left:50%;top:50%;}
.sub.product.eyeclon-ui .visual .frame .image li .message.right .in {left:auto;right:50%}
.sub.product.eyeclon-ui .visual .frame .image li .message .title {opacity:0;
	-webkit-transition: opacity .5s 0s, -webkit-transform .5s 0s ease-out;
	-moz-transition: opacity .5s 0s, -moz-transform .5s 0s ease-out;
	-ms-transition: opacity .5s 0s, -ms-transform .5s 0s ease-out;
	-o-transition: opacity .5s 0s, -o-transform .5s 0s ease-out;
	transition: opacity .5s 0s, transform .5s 0s ease-out;
}
.sub.product.eyeclon-ui .visual .frame .image li .message .des1 {opacity:0;
	-webkit-transition: opacity .5s .15s, -webkit-transform .5s .15s ease-out;
	-moz-transition: opacity .5s .15s, -moz-transform .5s .15s ease-out;
	-ms-transition: opacity .5s .15s, -ms-transform .5s .15s ease-out;
	-o-transition: opacity .5s .15s, -o-transform .5s .15s ease-out;
	transition: opacity .5s .15s, transform .5s .15s ease-out;
}
.sub.product.eyeclon-ui .visual .frame .image li .message .des2 {opacity:0;
	-webkit-transition: opacity .5s .3s, -webkit-transform .5s .3s ease-out;
	-moz-transition: opacity .5s .3s, -moz-transform .5s .3s ease-out;
	-ms-transition: opacity .5s .3s, -ms-transform .5s .3s ease-out;
	-o-transition: opacity .5s .3s, -o-transform .5s .3s ease-out;
	transition: opacity .5s .3s, transform .5s .3s ease-out;
}
.sub.product.eyeclon-ui .visual .frame .image li .message .title
, .sub.product.eyeclon-ui .visual .frame .image li .message .des1
, .sub.product.eyeclon-ui .visual .frame .image li .message .des2 {
	-webkit-transform: translate3d(0, -40px, 0);
	-moz-transform: translate3d(0, -40px, 0);
	-ms-transform: translate(0, -40px);
	-o-transform: translate3d(0, -40px, 0);
	transform: translate3d(0, -40px, 0);
	opacity:0;
}
.sub.product.eyeclon-ui .visual .frame .image li .message.show .title
, .sub.product.eyeclon-ui .visual .frame .image li .message.show .des1
, .sub.product.eyeclon-ui .visual .frame .image li .message.show .des2 {
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate(0, 0);
	-o-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	opacity:1;
}
.sub.product.eyeclon-ui .visual .frame .image li .mask {position:absolute;left:0;top:0;width:100%;height:100%;background:#fff;z-index:200;opacity:0;}

.sub.product.eyeclon-ui .visual .frame a.eyeclon-ui-animation-pause {display:block;position:absolute;left:30px;bottom:100px;width:30px;height:30px;background:url(../images/sub/product/btn_pause.png) no-repeat center bottom;z-index:1000;}
.sub.product.eyeclon-ui .visual .frame a.eyeclon-ui-animation-pause.pause {background:url(../images/sub/product/btn_pause.png) no-repeat center top;}
.sub.product.eyeclon-ui .visual .frame .btn {position:absolute;left:0;bottom:0;width:100%;height:70px;overflow:hidden;z-index:100;}
.sub.product.eyeclon-ui .visual .frame .btn li {width:16.7%;height:100%;float:left;}
.sub.product.eyeclon-ui .visual .frame .btn li.degree360{width:16.5%;}
.sub.product.eyeclon-ui .visual .frame .btn li a {display:block;width:100%;height:100%;position:relative;box-sizing: border-box;text-align:center;}
.sub.product.eyeclon-ui .visual .frame .btn li a .text {position:absolute;top:0;left:0;right:1px;height:100%;padding-top:28px;background:rgba(255,255,255,.35);color:#333;box-sizing:border-box;}
.sub.product.eyeclon-ui .visual .frame .btn li a:hover .text
, .sub.product.eyeclon-ui .visual .frame .btn li.active a .text {background:rgba(51,51,51,.48);color:#fff;}
.sub.product.eyeclon-ui .visual .frame .btn li a span.liner{width:100%; height:100%; background:url(../images/sub/product/line_3dbtn.gif) repeat-y right top; display:block; position:absolute; left:0; top:0;}
.sub.product.eyeclon-ui .visual .frame .btn li a span.icon{width:100%; height:100%; background:url(../images/sub/product/btn_3d.png) no-repeat center center; display:block;}
.sub.product.eyeclon-ui .visual .frame .btn li.home a span.icon{background:url(../images/sub/product/btn_3dhome.png) no-repeat center center;}
.sub.product.eyeclon-ui .visual .frame .btn li.degree360 a {background:rgba(255,255,255,.35);}
.sub.product.eyeclon-ui .visual .frame .btn li.degree360 a:hover,
.sub.product.eyeclon-ui .visual .frame .btn li.degree360.active a {background:rgba(51,51,51,.48);}
.sub.product.eyeclon-ui .visual .frame .btn li.degree360 a span.icon{background:url(../images/sub/product/btn_3d360.png) no-repeat center center;display:block;position:absolute;top:0;left:0;width:100%;height:100%;}
.sub.product.eyeclon-ui .visual .frame .view360 {display:block;position:absolute;width:16%;height:70px;right:0;left:auto;margin:0;bottom:0;background:#1a1a1a;}
.sub.product.eyeclon-ui .visual .frame .view360:hover {background:#0f0f0f;}
.sub.product.eyeclon-ui .visual .frame .view360 span{width:100%; height:100%; background:url(../images/sub/product/btn_3d360.png) no-repeat center center; display:block;}
.sub.product.eyeclon-ui .visual .frame .view360-layer {position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;display:none;}
.sub.product.eyeclon-ui .visual .frame .view360-layer canvas {width:100%;height:100%;}
.sub.product.eyeclon-ui .visual .frame .view360-layer a.close {display:block;width:49px;height:49px;position:absolute;top:40px;right:20px;background:url(../images/sub/product/btn_close.png) no-repeat;}
.sub.product.eyeclon-ui .visual.eyeclon-ui-view360 .frame .view360-layer{display:block;}
.sub.product.eyeclon-ui .container {position:relative;margin-top:100%;overflow:hidden;background:#fff;padding-top:0;
	-webkit-transition: background-color .4s;
	-moz-transition: background-color .4s;
	-ms-transition: background-color .4s;
	-o-transition: background-color .4s;
	transition: background-color .4s;}
.sub.product.eyeclon-ui .topper {position:relative;width:100%;overflow:hidden;display:block;}
.mobile .sub.product.eyeclon-ui .topper {position:relative;}
.sub.product.eyeclon-ui .topper .frame {width:100%;height:100%;max-width:none;display:block;background:none;padding:0;min-width:1140px;}
.sub.product.eyeclon-ui .topper .lefter {display:block;height:100%;position:fixed;left:0;top:0;min-width:638px;}
.mobile .sub.product.eyeclon-ui .topper .lefter {position:absolute;}
.sub.product.eyeclon-ui .topper .righter {opacity:1;position:absolute;right:0;top:0;height:100%;margin-top:60px;}
.sub.product.eyeclon-ui .topper .righter.big {margin-top:95px;}
.mobile .sub.product.eyeclon-ui .topper .righter {opacity:1;margin-top:0;}
.mobile .sub.product.eyeclon-ui .topper .righter.big {margin-top:0;}
.sub.product.eyeclon-ui .topper .in {display:table-cell;vertical-align: middle;}
.sub.product.eyeclon-ui .topper01 {top:0;z-index:1000;}
.sub.product.eyeclon-ui .topper02 {top:0;z-index:2000;}
.sub.product.eyeclon-ui .topper03 {top:0;z-index:3000;}
.sub.product.eyeclon-ui .detailBtn {position:relative;z-index:4000;background:#fff;text-align:center;}
/*
.sub.product.accessory.eyeclon-ui .detailBtn { position:absolute; background:none; }
*/
.sub.product.accessory.eyeclon-ui .detailBtn { position:absolute; background:none; }
.sub.product.eyeclon-ui .detailBtn a {position:relative;overflow:hidden;display:inline-block;background:url(../images/sub/product/detail_btn.png) no-repeat center;width:307px;height:54px;border:none;margin:0 20px;}
/*
.sub.product.accessory.eyeclon-ui .detailBtn a{background:url(../images/sub/product/detail_btn.png) no-repeat center; border-radius:0;}
*/
.sub.product.eyeclon-ui .detailBtn a.buyButton {background:yellow url(../images/sub/product/detail_btn2.jpg) no-repeat center;}
.sub.product.eyeclon-ui .detailBtn a .text {width:306px;height:54px;z-index:100;position:relative;}
.sub.product.eyeclon-ui .detailBtn a:after {content:' ';background:#f63;position:absolute;top:-100%;left:0;width:100%;height:100%;
	-webkit-transition: top .3s;
	-moz-transition: top .3s;
	-ms-transition: top .3s;
	-o-transition: top .3s;
	transition: top .3s;}
/*
.sub.product.accessory.eyeclon-ui .detailBtn a:after{background:url(../images/sub/product/detail_btn_on.png) no-repeat center;}
*/
.sub.product.eyeclon-ui .detailBtn a.buyButton:after{background:#000;}
.sub.product.eyeclon-ui .detailBtn a.in:after {top:0}
.sub.product.eyeclon-ui .detailBtn a.out:after {top:100%;}
.sub.product.eyeclon-ui .detailBtn a.reset:after {top:-100%;
	-webkit-transition: none ;
	-moz-transition: none ;
	-ms-transition: none ;
	-o-transition: none ;
	transition: none ;}
.sub.product.eyeclon-ui .detailPrd {position:relative;z-index:4000;background:#fff;}
.sub.product.eyeclon-ui .detailPrd .frame {/*max-width:none;*/}
.sub.product.eyeclon-ui .goTop:after {content:'';background:#f63;position:absolute;top:-100%;left:0;width:100%;height:100%;
	-webkit-transition: top .3s;
	-moz-transition: top .3s;
	-ms-transition: top .3s;
	-o-transition: top .3s;
	transition: top .3s;}
.sub.product.eyeclon-ui .goTop.in:after {top:0}
.sub.product.eyeclon-ui .goTop.out:after {top:100%;}
.sub.product.eyeclon-ui .goTop.reset:after {top:-100%;
	-webkit-transition: none ;
	-moz-transition: none ;
	-ms-transition: none ;
	-o-transition: none ;
	transition: none ;}

html.view360, html.view360 body {margin:0;padding:0;height:100%;overflow:hidden;}
html.view360 canvas {width:100%;height:100%;}

.mesign {position:relative;z-index:5000;}
.mesign .message {background:#fff url(../images/main/message.png) no-repeat center center;}

.footer {position:relative; z-index:5000;}

.eyeclon-ui-circle-loading {position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.85);z-index:1200;
	-webkit-transition: -webkit-transform .3s ease-out, background-color .3s;
	-moz-transition: -moz-transform .3s ease-out, background-color .3s;
	-ms-transition: -ms-transform .3s ease-out, background-color .3s;
	-o-transition: -o-transform .3s ease-out, background-color .3s;
	transition: transform .3s ease-out, background-color .3s;
}
.eyeclon-ui-circle-loading canvas {width:160px;height:160px;position:absolute;top:50%;left:50%;margin-left:-80px;margin-top:-80px;}
.eyeclon-ui-circle-loading.end {
	-webkit-transform: translate3d(0, -100%, 0);
	-moz-transform: translate3d(0, -100%, 0);
	-ms-transform: translate(0, -100%);
	-o-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);}