@import url('../../../css/normalize.css');
@import url('../../../css/common.css');
@import url('../../../css/webfont.css');

/*
------------------------------------------------
 common
------------------------------------------------
*/

body{}
.body_wrap{width:1280px; height:900px;}
.content_container {display:none;position:absolute; top:0; left:50%; width:1280px; height:900px; margin:0 0 0 -640px; overflow:hidden;}
.content_page_wrap {display:none;}
/*#content_page {position:absolute; width:1280px; height:900px; z-index:1;}*/
div.pages {display:none;position:absolute; top:0; left:0; width:1280px; height:900px; overflow:hidden;}
.acc_tag{position:absolute; left:-9999px; top:-9999px; visibility:hidden; height:0px; width:0; text-indent:-9999px; font-size:0 }

.show { display:block; }
.hide { display:none; }
.hidden_txt {text-indent:-9999px;font-size:0px;position:absolute;top:-9999px;}

/* btns */
.bn-back, .bn-preview, .bn-next{display:none; position:absolute;}
.bn-back {top:0; right:0; z-index:10;}
.bn-preview {top:50%; left:0; margin-top:-33px;z-index:100; padding:23px 25px;}
.bn-next {top:50%; right:0; margin-top:-33px; z-index:100; padding:23px 25px;}
.bn-back span, .bn-preview span, .bn-next span{display:block; text-indent:-9999px; overflow: hidden;}
.bn-back span{width:60px; height:60px; background:url('../img/bn_back.png') no-repeat left top; overflow: hidden;}
.bn-preview span{width:14px; height:21px; background:url('../img/bn_preview_white.png') no-repeat left top}
.bn-next span{width:14px; height:21px; background:url('../img/bn_next_white.png') no-repeat left top}
.inverse.bn-back span{background:url('../img/bn_back.png') no-repeat left top;}
.inverse.bn-preview span{background:url('../img/bn_preview.png') no-repeat left top;}
.inverse.bn-next span{background:url('../img/bn_next.png') no-repeat left top;}

/* sns */
.sns-bns {position:absolute; bottom:40px; left:32px; display:none; z-index:10000;}
.sns-bns li {border-bottom:1px solid #fff}
.sns-bns li.inverse{border-bottom:1px solid #000;}
.sns-bns li a { display:block; overflow: hidden; width:21px; height:51px; background-position:left center; background-repeat:no-repeat; text-indent:-9999px}
.sns-bns li.sns_3 { border: none}
.sns-bns li.sns_0 a{background-image:url('../img/bn_facebook_white.png');}
.sns-bns li.sns_1 a{background-image:url('../img/bn_twitter_white.png');}
.sns-bns li.sns_2 a{background-image:url('../img/bn_qqq_white.png');}
.sns-bns li.sns_3 a{background-image:url('../img/bn_google_white.png');}
.sns-bns li.inverse.sns_0 a{background-image:url('../img/bn_facebook.png');}
.sns-bns li.inverse.sns_1 a{background-image:url('../img/bn_twitter.png');}
.sns-bns li.inverse.sns_2 a{background-image:url('../img/bn_qqq.png');}
.sns-bns li.inverse.sns_3 a{background-image:url('../img/bn_google.png');}

/* indicator */
.indicator {position:absolute; left:50%; top:95%; z-index:10; margin-left:-50px; }
.indicator li{position:relative; width:15px; height:15px; margin: 0px 6px 0px 0px; float: left; cursor : pointer;}
.indicator li a{display:block; width:15px; height:15px; text-indent:-10000px; overflow:hidden;}
.indicator-btn {background:url('../img/indicator_white.png') 0 0 no-repeat;}
.indicator-btn.on {background:url('../img/indicator_on_white.png') 0 0 no-repeat;}
.indicator-btn.inverse {background:url('../img/indicator.png') 0 0 no-repeat;}
.indicator-btn.inverse.on {background:url('../img/indicator_on.png') 0 0 no-repeat;}

/* loading */

.loading { position:absolute; top:50%; left:50%; margin:-8px 0 0 -38px; width:100px; height:10px; opacity: 1;}
.loading .loading-list { width: 100%; height: 100%; display: flex; justify-content: space-around;}
.loading .loading-dot {width: 8px; height: 8px; border-radius: 100%;}
.loading p { position:relative; left:0%; top:25px; text-align:center; font:12px/1 'samsungif_bd'; }


/* 딜레이가 들어간 순차 확대 애니메이션 */
.loading .loading-dot {
  animation: loadingPulse 1.2s infinite ease-in-out;
  transform-origin: center center;
  background-color: #000; 
  opacity: 0.3;          
}

/* 각 dot에 순차 딜레이 */
.loading .loading-dot:nth-child(1) { animation-delay: 0s; }
.loading .loading-dot:nth-child(2) { animation-delay: 0.1s; }
.loading .loading-dot:nth-child(3) { animation-delay: 0.2s; }
.loading .loading-dot:nth-child(4) { animation-delay: 0.3s; }
.loading .loading-dot:nth-child(5) { animation-delay: 0.4s; }

@keyframes loadingPulse {
   0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;      
    transform: scale(1.1); 
  }
}

/* info_rotate */
.info_rotate { position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; z-index:9999; display:none; }
.info_rotate img { width:100%; }

/*
------------------------------------------------
 customized contents
------------------------------------------------
*/

.pages, .cover{position:absolute; width:1280px; height: 900px}

/* popup */
.popup { position:absolute; left:0px; top:0px; width:1280px; height:900px;  z-index:10000; background:#fff;}
.popup p{font-family:'secgcm'; font-size:15px; color:#fff; line-height:28px; text-align:justify; letter-spacing:-.5px;}
.popup span{font-family:'secgcm'; color:#fff; line-height:inherit;}
.popup .close-btn {position: absolute; z-index: 9999; right: 34px; top: 17px; color:#000;}
.popup .close-btn a { display:block; background:url('../img/close_btn.png') 0 0 no-repeat; width:83px; height:83px; text-indent:-10000px; margin:14px 0 0 1160px; overflow:hidden;}
.popup .close-btn.inverse a { display:block; background:url('../img/close_btn_black.png') 0 0 no-repeat; width:83px; height:83px; text-indent:-10000px; margin:14px 0 0 1160px; overflow:hidden;}
.popup .close-btn a:focus{ outline:1px dotted #000}

/***********************page style*********************/

*{-webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
}

div.page02{position:relative;}
.page02 .step1{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;}
.page02 .step1 .blur{width:1280px;height:900px;background:#fff;opacity:.7;filter:alpha(opacity=70)}
.page02 .step1 #redux{position:absolute;left:0;top:0;width:1280px !important;height:900px !important;cursor:pointer;z-index:1;}
.page02 .step2{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;background:url("../img/page2-2.png") no-repeat;}
.page02 .step2 .rings{position:relative;width:635px;height:635px;top:145px;margin:0 auto;cursor:pointer;}
.page02 .step2 .rings .shadow{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;background:url("../img/ring.png") no-repeat;}
.page02 .step2 .btm-ring{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;overflow:hidden;border-radius:50%;}
.page02 .step2 .btm-ring .makeRing{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;}
.page02 .step2 .btm-ring .color{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;}
.page02 .step2 .btm-ring #particles{overflow:hidden;position:relative;top:20px;width:595px;height:595px;margin:0 auto;border-radius:50%;}
.page02 .step2 .btm-ring #particles video{display:block;width:595px;height:595px;overflow:hidden;border-radius:50%;}
.page02 .step2 .top-ring{position:absolute;left:0;top:0;width:635px;height:635px;z-index:2;overflow:hidden;border-radius:50%;}
.page02 .step2 .top-ring .makeRing{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;}
.page02 .step2 .top-ring .color{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;}
.page02 .step2 .top-ring .fixcolor{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;}
.page02 .step2 .top-ring .fixcolor li{display:none;position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;overflow:hidden;}
.page02 .step2 .top-ring .fixcolor li.intro{background:url("../img/ring3.png") no-repeat;}
.page02 .step2 .top-ring .fixcolor li.senso{background:url("../img/ring5.png") no-repeat;}
.page02 .step2 .top-ring .fixcolor li.fuori{background:url("../img/ring7.png") no-repeat;}
.page02 .step2 .indi li{position:absolute;width:223px;height:29px;z-index:3;}
.page02 .step2 .indi li a{overflow:hidden;display:block;width:0;height:100%;cursor:pointer;}
.page02 .step2 .indi li.intro{left:528px;top:101px;}
.page02 .step2 .indi li.senso{left:960px;top:603px;}
.page02 .step2 .indi li.fuori{left:99px;top:603px;}

.sensorialExp{position:relative;width:275px;height:253px;}
.sensorialExp > div{width:275px;height:253px;background:url('../img/photos1-1.jpg') no-repeat left top;}
.sensorialPop{position:relative;width:1120px;height:600px;}
.sensorialPop > div{width:1120px;height:600px;background:url('../img/photos1-1.jpg') no-repeat left top;}



.webtext{position:absolute;}
.webtext dt{margin-bottom:16px;font-size:22px;font-family:'samsungif_bd';color:#000;}
.webtext dd{font-size:14px;line-height:25px;font-family:'secgcm';color:#000;text-align:justify;}

.autoPhotos{position:absolute;left:80px;top:197px;width:1120px;height:320px;overflow:hidden;}
.autoPhotos > div{width:100%;height:100%;}

.popPhotos{position:absolute;left:0;top:0;}
.popPhotos ul{overflow:hidden;}
.popPhotos ul:after{display:block;clear:both;content:"";}
.popPhotos li{float:left;}
.popPhotos li a{display:block;width:100%;height:100%;}

.popup{background:#000;}
.popCont{padding-top:150px;width:1120px;height:600px;margin:0 auto;}
.popCont img{display:block;width:100%;}

.page03{position:relative;}
.page03 .webtext{left:402px;top:570px;width:750px;}
.page03 .webtext dt{margin-bottom:24px;}

.page04{position:relative;}
.page04 .webtext{left:365px;top:670px;width:835px;}

.page05{position:relative;}
.page05 .webtext{left:402px;top:230px;width:750px;}

.page04 .popPhotos{left:365px;top:197px;width:844px;}
.page04 .popPhotos li{margin-right:9px;margin-bottom:10px;}

.page05 .popPhotos{left:80px;top:450px;width:1141px;}
.page05 .popPhotos li{margin-right:20px;margin-bottom:16px;}

@-ms-keyframes play {
   0% { background-image:url("../img/ring1.png");}
   14% { background-image:url("../img/ring2.png");}
   28% { background-image:url("../img/ring3.png");}
   42% { background-image:url("../img/ring4.png");}
   56% { background-image:url("../img/ring5.png");}
   70% { background-image:url("../img/ring6.png");}
   85% { background-image:url("../img/ring7.png");}
}
@-webkit-keyframes play {
   0% { background-image:url("../img/ring1.png");}
   14% { background-image:url("../img/ring2.png");}
   28% { background-image:url("../img/ring3.png");}
   42% { background-image:url("../img/ring4.png");}
   56% { background-image:url("../img/ring5.png");}
   70% { background-image:url("../img/ring6.png");}
   85% { background-image:url("../img/ring7.png");}
}
@keyframes play {
   0% { background-image:url("../img/ring1.png");}
   14% { background-image:url("../img/ring2.png");}
   28% { background-image:url("../img/ring3.png");}
   42% { background-image:url("../img/ring4.png");}
   56% { background-image:url("../img/ring5.png");}
   70% { background-image:url("../img/ring6.png");}
   85% { background-image:url("../img/ring7.png");}
}

@-ms-keyframes play2 {
   0% { background-image:url("../img/ring2.png");}
   14% { background-image:url("../img/ring3.png");}
   28% { background-image:url("../img/ring4.png");}
   42% { background-image:url("../img/ring5.png");}
   56% { background-image:url("../img/ring6.png");}
   70% { background-image:url("../img/ring7.png");}
   85% { background-image:url("../img/ring1.png");}
}
@-webkit-keyframes play2 {
   0% { background-image:url("../img/ring2.png");}
   14% { background-image:url("../img/ring3.png");}
   28% { background-image:url("../img/ring4.png");}
   42% { background-image:url("../img/ring5.png");}
   56% { background-image:url("../img/ring6.png");}
   70% { background-image:url("../img/ring7.png");}
   85% { background-image:url("../img/ring1.png");}
}
@keyframes play2 {
   0% { background-image:url("../img/ring2.png");}
   14% { background-image:url("../img/ring3.png");}
   28% { background-image:url("../img/ring4.png");}
   42% { background-image:url("../img/ring5.png");}
   56% { background-image:url("../img/ring6.png");}
   70% { background-image:url("../img/ring7.png");}
   85% { background-image:url("../img/ring1.png");}
}