@charset "utf-8";

/* button */
.button-prd{display:inline-block;font-family:"SamsungIFBd",Arial,sans-serif;font-size:17px;text-transform:uppercase;padding:10px 17px;border:1px solid #5f5f5f;margin-top:10px;background-color:transparent;-webkit-transition-property:all;-moz-transition-property:all;transition-property:all;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;transition-timing-function:ease-in}
.button-prd:hover{background-color:#5f5f5f;color:#fff;-webkit-transition-property:all;-moz-transition-property:all;transition-property:all;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;transition-timing-function:ease-in}
.button-media{width:45px;height:45px;border-radius:50%;font-size:1px;line-height:100px;overflow:hidden;  -webkit-transition: 0.25s background;
  -moz-transition: 0.25s background;
  transition: 0.25s background;background:url(/es/common/img/btn-play.png) no-repeat}
.button-media:hover,.button-media:focus{background-color:rgba(255,255,255,0.5);border-radius:50%}

#content{font-size:17px;min-width:320px;position:relative;}

/* loading */
@-webkit-keyframes bouncedelay {
  0%,80%,100% {
  -webkit-transform: scale(0);
  }

40% {
  -webkit-transform: scale(1);
  }
}
@keyframes bouncedelay {
  0%,80%,100% {
  transform: scale(0);
  -webkit-transform: scale(0);
  }

  40% {
  transform: scale(1);
  -webkit-transform: scale(1);
  }
}
.loader{
position: absolute;
width:100%;height:100%;
z-index: 100;
background-image: url('/es/common/img/home/logo-start-bg.png');
background-repeat: no-repeat;
background-position: center 250px;
background-color: #17181B;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;  
}
.spinner{
position: absolute;
left: 50%;
top: 370px;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 70px;
text-align: center;
}
.spinner>div {
width: 18px;
height: 18px;
background-color: #FFF;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader.hide{opacity:0}
.loader.lower{z-index:-1}

.story-cluster{position:relative;font-size:1.3vw;height:100%;max-height:700px;overflow:hidden;
  background:-webkit-linear-gradient(#f2f2f2,#dbdbdb);
  background:-o-linear-gradient(#f2f2f2,#dbdbdb);
  background:-moz-linear-gradient(#f2f2f2,#dbdbdb);
  background:linear-gradient(#f2f2f2,#dbdbdb);
  filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f2f2', endColorstr='#dbdbdb')}
.stroy-cluster:after{display:block;clear:both;content:''}
 
.cluster-minheight{min-height:500px;}

.prd-heading{display:block;font-size:2.5vw;font-weight:normal;line-height:300%;max-width:1280px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.prd-heading .tit-line{padding-bottom:1%}
.section-wrap{clear:both;max-width:1280px;max-height:600px;margin:0 auto;position:relative;padding:0 40px;box-sizing:border-box}
.section-wrap:after{display:block;content:'';clear:both}
.prd-item{float:left;width:50%;max-height:300px;position:relative;z-index:2}
.prd-tit{font-family:"SamsungIFBd";font-size:1.6vw;line-height:130%;font-weight:normal;text-transform:uppercase}
.sub-tit{display:block;font-family:"SamsungIFBd"}
.prd-txt{line-height:120%}
.prd-info{position:absolute;top:0;left:0;z-index:3}
.prd-img{width:111.6%;margin:-17% 0 0 -33%;/*position:relative;*/}
.prd-img img{width:100%}
.prd-logo{position:absolute;width:auto;height:auto}

.section-wrap{opacity:0}
.has-animated .section-wrap{opacity:1}

.has-frame{max-height:600px;position:relative;padding:0}
.has-frame .prd-img{margin-top:-16%;margin-left:-33%;position:relative;z-index:2;width:166.6%}
.has-frame .prd-tit{font-size:2.5vw;font-family:"SamsungIFRg"}

.prd-quarter{width:25%}
.prd-quarter .prd-img{width:173.2%;margin:-37% 0 0 -37%}

/* animating box */
.prd-frame{position:absolute;z-index:1}
.animating-box .border{background-color:#42B6F8;position:absolute}
.animating-box .top-border,.animating-box .bottom-border{height:5px}
.animating-box .right-border,.animating-box .left-border{width:5px}
.animating-box .top-border{top:0;left:0;width:0;-webkit-transition:width 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 900ms;-moz-transition:width 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 900ms;transition:width 300ms cubic-bezier(0.55, 0.055, 0.675, 0.19) 900ms}
.animating-box .left-border{bottom:0;left:0;height:0;-webkit-transition:height 150ms cubic-bezier(0.215, 0.61, 0.355, 1) 1500ms;-moz-transition:height 150ms cubic-bezier(0.215, 0.61, 0.355, 1) 1500ms;transition:height 150ms cubic-bezier(0.215, 0.61, 0.355, 1) 1500ms}
.animating-box .right-border{top:0;right:0;height:0;-webkit-transition:height 150ms linear 1200ms;-moz-transition:height 150ms linear 1200ms;transition:height 150ms linear 1200ms}
.animating-box .bottom-border{bottom:0;right:0;width:0;-webkit-transition:width 150ms linear 1350ms;-moz-transition:width 150ms linear 1350ms;transition:width 150ms linear 1350ms}
.has-animated .top-border,.has-animated .bottom-border{width:100%}
.has-animated .right-border,.has-animated .left-border{height:100%}

/* motion */
.top-to-bot{opacity:0;-webkit-transform:translateY(-50px);
-moz-transform:translateY(-50px);
-ms-transform:translateY(-50px);
-o-transform:translateY(-50px);
transform:translateY(-50px);
}
.bot-to-top{opacity:0;
-webkit-transform:translateY(50px);
-moz-transform:translateY(50px);
-ms-transform:translateY(50px);
-o-transform:translateY(50px);
transform:translateY(50px);
}
.left-to-right{opacity:0;
-webkit-transform:translateX(-50px);
-moz-transform:translateX(-50px);
-ms-transform:translateX(-50px);
-o-transform:translateX(-50px);
transform:translateX(-50px);
}
.right-to-left{opacity:0;
-webkit-transform:translateX(50px);
-moz-transform:translateX(50px);
-ms-transform:translateX(50px);
-o-transform:translateX(50px);
transform:translateX(50px);
}
.fade-in{opacity:0}
.has-animated .top-to-bot,.has-animated .bot-to-top,.has-animated .left-to-right,.has-animated .right-to-left,.prd-heading.has-animated{opacity:1;
-webkit-transform:translate(0px, 0px);
-moz-transform:translate(0px, 0px);
-ms-transform:translate(0px, 0px);
-o-transform:translate(0px, 0px);
transform:translate(0px, 0px);
}
.has-animated .fade-in{opacity:1;
-webkit-transition:opacity 1200ms ease 1800ms;
-moz-transition:opacity 1200ms ease 1800ms;
transition:opacity 1200ms ease 1800ms;
}
.has-animated .top-to-bot{
-webkit-transition:-webkit-transform 600ms ease 300ms,opacity 600ms ease 300ms;
-moz-transition:-moz-transform 600ms ease 300ms,opacity 600ms ease 300ms;
transition:transform 600ms ease 300ms,opacity 600ms ease 300ms
}
.has-animated .bot-to-top{
-webkit-transition:-webkit-transform 600ms ease 500ms,opacity 600ms ease 500ms;
-moz-transition:-moz-transform 600ms ease 500ms,opacity 600ms ease 500ms;
transition:transform 600ms ease 500ms,opacity 600ms ease 500ms
}
.has-animated .left-to-right{
-webkit-transition:-webkit-transform 600ms ease 700ms,opacity 600ms ease 700ms;
-moz-transition:-moz-transform 600ms ease 700ms,opacity 600ms ease 700ms;
transition:transform 600ms ease 700ms,opacity 600ms ease 700ms
}
.has-animated .right-to-left{
-webkit-transition:-webkit-transform 600ms ease 700ms,opacity 600ms ease 700ms;
-moz-transition:-moz-transform 600ms ease 700ms,opacity 600ms ease 700ms;
transition:transform 600ms ease 700ms,opacity 600ms ease 700ms;
}

/* video */
.video-area{display:none;position:absolute;width:100%;top:0;left:0;right:0;bottom:0;z-index:100;}
.video-area:before{position:fixed;content:'';background:rgba(0,0,0,.8);width:100%;height:100%;top:0;left:0;right:0;bottom:0;}

.video-wrap .button-close{width:21px;height:21px;position:absolute;top:-30px;right:0;background:url(/master/common/img/btn-close.png) no-repeat;line-height:100px;font-size:1px;overflow:hidden;}
.grids-video-player{width:100%;height:100%;position:absolute;left:0;right:0;top:0;bottom:0;}
.video-wrap{
  position:relative;
  display:inline-block;
  vertical-align:baseline;
  zoom:1;
  *display:inline;
  *vertical-align:auto;
  vertical-align:top;
  width:100%;
  width:100%;
  max-width:1024px;
  top:50%;
  left:50%;
  background-color:#000000
}
.video-wrap:after{
  padding-top:56.25%;
  content:'';
  display:block
}
.video-open #wrap{overflow-x:hidden;}
.video-open .story-cluster,.video-open .section-wrap{position:static;}

/* 1st cluster */
.top-area .prd-frame{top:5%;left:4%;width:91%;height:60%}
.top-area .has-frame .prd-info{top:19%;left:51%}
.top-area .prd-second{z-index:3}
.top-area .prd-second .prd-info{top:74%;left:11%;text-align:center}
.top-area .prd-second .prd-tit br{display:none}
.top-area .prd-third .prd-info{top:24%;left:18%;width:80%;text-align:center}
.top-area .prd-fourth .prd-info{top:30%;left:35%}
.top-area .sub-tit{display:inline}

/* 2nd cluster */
.middle-area .prd-frame{top:3%;left:0;width:79%;height:60%}
.middle-area .has-frame .prd-info{top:10%;left:7%}
.middle-area .has-frame .prd-img img{width:100%;height:auto}
.middle-area .animating-box .border{background:#33b674}
.middle-area .prd-second .prd-info{top:-8%;left:46%}
.middle-area .prd-third .prd-logo{top:60%;left:0}
.middle-area .prd-third{z-index:10;}
.middle-area .prd-third .prd-info{top:-5%;left:10%;width:100%;text-align:center}
.middle-area .prd-fourth .prd-info{top:20%;left:29%;text-align:center}

/* 3rd cluster */
.bottom-area{padding-bottom:1%}
.bottom-area .prd-frame{top:2%;left:22%;width:69%;height:48%}
.bottom-area .has-frame .prd-info{top:38%;left:7%}
.bottom-area .has-frame .prd-tit{color:#fff}
.bottom-area .has-frame .prd-logo{top:10%;left:60%}
.bottom-area .animating-box .border{background:#d883ff}
.bottom-area .prd-second{max-height:600px}
.bottom-area .prd-second .prd-img{margin-left:-66.6%;width:223.2%}
.bottom-area .prd-second .prd-info{top:77%;left:-11%;text-align:center}
.bottom-area .prd-third .prd-info{top:-11%;left:-25%;text-align:center}
.bottom-area .prd-fourth .prd-info{top:16%;left:-26%}
.bottom-area .prd-third .button-media{position:absolute;top:35%;left:-23%}

.privacy{background-color:#f2f2f2;border:1px solid #fff;border-width:1px 0;padding:15px 40px 20px}
.privacy p{max-width:1200px;margin:0 auto;font-size:14px;line-height:1.4;color:#5f5f5f}
.privacy p+p{margin-top:10px}
.privacy p a{color:#006ec5}

@media screen and (min-width:1200px){
.prd-heading{font-size:33px}
.prd-tit{font-size:22px}
.has-frame .prd-tit{font-size:32px}
.story-cluster{font-size:17px}
.button-prd{font-size:15px}
}
@media screen and (max-width:1100px){
.top-area .align-center{top:23%}
.button-prd{font-size:1.2vw}
}
@media screen and (min-width:1025px) {
.bottom-area .has-frame .prd-info h3,.bottom-area .has-frame .prd-info p,.bottom-area .has-frame .prd-info a{color:#fff}
.bottom-area .has-frame .button-prd{border-color:#fff}
.bottom-area .has-frame .button-prd:hover{background-color:#fff;color:#5f5f5f}
}
@media screen and (max-width:1024px){
.top-area .has-frame, .middle-area .has-frame, .bottom-area .has-frame{width:48%;padding-top:7%;margin-right:2%}
.story-cluster,.section-wrap,.has-frame{max-height:100%}
.section-wrap{max-width:1024px;padding:0 20px 20px}
.prd-heading{padding:0 20px;font-size:3vw}
.prd-tit{font-size:1.5vw}
.prd-info{position:static}
.prd-logo{display:none}
.has-frame .prd-img,.prd-quarter .prd-img,.prd-img{width:100%;margin:0}
.has-frame .prd-tit{font-size:3vw}
.has-frame .prd-img img{width:63%;margin-bottom:8%}
.prd-frame{width:100%}
.top-area .section-wrap{padding-bottom:0}
.top-area .prd-frame .prd-info{position:relative}
.top-area .has-frame .prd-img{margin-top:5%}
.top-area .has-frame .prd-info{position:relative;left:0;top:0}
.top-area .has-frame .prd-info,.top-area .has-frame .prd-img{text-align:center}
.top-area .has-frame .prd-txt br{display:none}
.top-area .prd-quarter .prd-img{margin-top:5%;margin-left:8%}
.top-area .prd-second{padding-right:1%;box-sizing:border-box}
.top-area .prd-second .prd-info{position:absolute;top:90%;width:100%;left:0}
.top-area .prd-second .prd-tit br{display:block}
.top-area .prd-third{padding-left:1%;margin-top:9%;box-sizing:border-box}
.top-area .prd-third .prd-info{width:100%}
.top-area .prd-third .prd-img{margin-top:9%;margin-left:0}
.top-area .prd-fourth{margin-top:5%}
.top-area .prd-fourth .prd-info{width:35%;float:right;margin-top:16%}
.top-area .prd-fourth .prd-img{width:57%;float:right;padding-right:2%;box-sizing:border-box}
.top-area .prd-frame{top:3%;left:0;width:100%;height:65%}

.middle-area .section-wrap{margin-top:1%}
.middle-area .prd-frame{top:0;left: 0;width: 100%;height: 61%}
.middle-area .has-frame .prd-info{text-align:center;position:relative;top:0;left:0}
.middle-area .has-frame .prd-img{left:29%;margin-top:6%}
.middle-area .has-frame .prd-img img{width:45%}
.middle-area .prd-tit+.prd-txt{margin-top:2%}
.middle-area .prd-second .prd-img{float:left;width:43%;margin-left:10%}
.middle-area .prd-second .prd-info{position:absolute;top:13%;left:54%}
.middle-area .prd-second .prd-tit br{display:none}
.middle-area .prd-third{margin-top:1%;margin-left:3%}
.middle-area .prd-third .prd-info{position:absolute;top:19%;left:0}
.middle-area .prd-third .prd-logo{display:none}
.middle-area .prd-third .prd-img{margin-top:62%}
.middle-area .prd-fourth{position:absolute;top:42%;right:0;width:24%}
.middle-area .prd-fourth .prd-img{margin-top:5%;text-align:center}
.middle-area .prd-fourth .prd-img img{width:83%;height:auto}
.middle-area .prd-fourth .prd-info{width:auto;margin-top:10%}

.bottom-area .prd-frame{left:0;width:100%;height:50%}
.bottom-area .has-frame{text-align:center}
.bottom-area .has-frame .prd-tit{color:#5f5f5f}
.bottom-area .has-frame .prd-img img{width:84%}
.bottom-area .has-frame .prd-info{position:relative;top:0;left:0}
.bottom-area .prd-second,.bottom-area .prd-fourth{max-height:300px;width:25%;margin-top:24%}
.bottom-area .prd-second{width:20%;margin-left:3%;margin-right:2%}
.bottom-area .prd-second .prd-img{width:100%;margin:0;text-align:center}
.bottom-area .prd-second .prd-img img{width:52%}
.bottom-area .prd-second .prd-info{width:100%;margin-top:5%}
.bottom-area .prd-second .prd-tit br{display:none}
.bottom-area .prd-third{width:48%;position:absolute;top:6%;right:0}
.bottom-area .prd-third .prd-img{position:relative;width:64%;float:left;padding-right:2%;box-sizing:border-box}
.bottom-area .prd-third .button-media{top:4%;left:2%}
.bottom-area .prd-third .prd-info{width:34%;float:right;text-align:left;margin-top:2%}
.bottom-area .prd-fourth{text-align:center}
.bottom-area .prd-fourth .prd-info{margin-top:7%}
.bottom-area .prd-fourth .prd-img{margin-top:20%;text-align:center}
.bottom-area .prd-fourth .prd-img img{width:90%;text-align:center}

.privacy{padding:15px 20px 20px}
}
@media screen and (max-width:980px){
.loader{background-image:none}
.prd-tit{font-size:1.6vw}
.story-cluster{font-size:1.5vw}
.button-prd{font-size:1.3vw}
}
@media screen and (max-width:767px){
.section-wrap{max-width:747px;padding:0 10px 8%}
.story-cluster{font-size:2.2vw}
.prd-heading{padding:0 10px;font-size:3.3vw}
.button-prd{font-size:2.1vw}
.prd-tit{font-size:3vw}
.prd-item{max-height:100%}
.has-frame .prd-tit{font-size:3.5vw}
.top-area .has-frame, .middle-area .has-frame, .bottom-area .has-frame,.prd-item,.prd-quarter{width:100%;margin:0}
.top-area .has-frame .prd-info{margin-top:5%;padding:0 1%;box-sizing:border-box}
.top-area .has-frame .prd-img img{width:77%}
.top-area .prd-quarter .prd-img{margin-top:5%;width:55%;margin-left:5%}
.top-area .prd-second{margin-top:5%}
.top-area .prd-second .prd-info{position:static;float:left;width:35%;margin-top:19%;text-align:left;margin-left:10%}
.top-area .prd-second .prd-img{margin:0;float:left;width:50%}
.top-area .prd-third{padding:0;text-align:center;margin-top:5%}
.top-area .prd-third .prd-tit br{display:none}
.top-area .prd-third .prd-img img{width:160%}
.top-area .prd-fourth{margin-bottom:16%;margin-top:10%}
.top-area .prd-fourth .prd-img{float:left;width:65%}
.middle-area .has-frame .prd-img{left:25%}
.middle-area .prd-second{margin-top:8%}
.middle-area .prd-second .prd-img{width:40%;margin-left:8%}
.middle-area .prd-second .prd-info{float:none;padding:2% 0 0}
.middle-area .prd-second .prd-tit br{display:block}
.middle-area .prd-third{width:100%;margin-left:0;margin-top:11%}
.middle-area .prd-info br{display:none}
.middle-area .prd-third .prd-info{text-align:center}
.middle-area .prd-third .prd-img{text-align:center;margin-top:15px}
.middle-area .prd-fourth{margin-top:11%}
.middle-area .prd-fourth .prd-info{position:absolute;top:0;margin-top:0;left:0;width:100%}
.middle-area .prd-fourth .prd-img{width:100%;margin-top:28%;margin-bottom:5%}
.middle-area .prd-fourth .prd-img img{width:85%}
.middle-area .prd-fourth,.middle-area .prd-third .prd-info{position:static;width:100%}
.bottom-area .prd-second,.bottom-area .prd-third{position:static;width:100%;margin:0}
.bottom-area .prd-second, .bottom-area .prd-fourth{max-height:100%}
.bottom-area .prd-second .prd-img{float:right;width:50%}
.bottom-area .prd-second .prd-img img{width:68%;float:left}
.bottom-area .prd-second .prd-info{float:left;width:35%;text-align:left;margin-top:15%;margin-left:15%}
.bottom-area .prd-second .prd-tit br{display:block}
.bottom-area .prd-third .prd-info{width:100%;text-align:center;margin-top:11%}
.bottom-area .prd-third .prd-img{width:100%;padding-right:0;margin-top:15px}
.bottom-area .prd-third .button-media{top:2%;}
.bottom-area .prd-fourth{display:table;width:100%;margin-top:10%}
.bottom-area .prd-fourth .prd-img{margin-top:0}
.bottom-area .prd-fourth .prd-info{display:table-cell;text-align:left;margin-top:0;vertical-align:middle}

.animating-box .top-border,.animating-box .bottom-border{width:100%}
.animating-box .right-border,.animating-box .left-border{height:100%}
.top-to-bot,.bot-to-top,.left-to-right,.right-to-left,.fade-in{opacity:1;
-webkit-transform:none;
-moz-transform:none;
-ms-transform:none;
-o-transform:none;
transform:none}
.privacy{text-align:center}

.story-cluster .section-wrap{opacity:0}
.story-cluster.has-animated .section-wrap{opacity:1;transition:-webkit-transform opacity 500s ease 500ms;transition:opacity 500ms ease 500ms}
}
@media screen and (max-width:640px){
.story-cluster{font-size:3.2vw}
.prd-heading{font-size:5vw}
.prd-tit{font-size:3.5vw}
.has-frame .prd-tit{font-size:5vw}
.button-prd{font-size:3vw}
}
@media screen and (max-width:480px){
.story-cluster{font-size:3.8vw}
.prd-heading{font-size:5.5vw}
.prd-tit{font-size:4.3vw}
.has-frame .prd-tit{font-size:6vw}
}
@media screen and (max-width:320px){
.story-cluster{font-size:4vw}
.prd-heading{font-size:5.5vw}
.prd-tit{font-size:4.5vw}
.has-frame .prd-tit{font-size:6vw}
.button-prd{font-size:3.8vw}
}

/* hide google conversion iframe */
iframe[name="google_conversion_frame"] { display: none; }