@charset "utf-8";

/* button */
.button-prd{display:inline-block;font-family:'SamsungIFBd',Arial,sans-serif;font-size:12px;text-transform:uppercase;padding:10px 20px;border:1px solid #5f5f5f;margin-top:10px;background-color:transparent;color:#000;-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}
.prd-link:hover .button-prd,.prd-link:focus .button-prd{border-color:#000;background-color:#000;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{position:absolute;top:4%;left:3%}
.button-media:after{position:absolute;top:50%;left:0;width:45px;height:45px;margin-top:-23px;overflow:hidden;-webkit-transition:0.25s background;-moz-transition:0.25s background;transition:0.25s background;background:url(/br/common/img/btn-play.png) no-repeat;content:''}
.button-media span{font-family:'SamsungIFBd',sans-serif;display:block;padding-left:56px;font-size:22px;color:#fff} 
.prd-link:hover .button-media:after,.prd-link:focus .button-media:after{background:url(/br/common/img/btn-play-over.png) no-repeat}
.touch-device .prd-link .button-prd{color:#000}
.touch-device .prd-link:hover .button-prd,.touch-device .prd-link:focus .button-prd{border-color:#5f5f5f;background-color:transparent;color:#5f5f5f}
.touch-device .prd-link .button-prd:hover,.touch-device .prd-link .button-prd:focus{border-color:#000;background:#000;color:#fff}
#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(/br/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(180deg,#f2f2f2,#dbdbdb);
	background:-o-linear-gradient(180deg,#f2f2f2,#dbdbdb);
	background:-moz-linear-gradient(180deg,#f2f2f2,#dbdbdb);
	background:linear-gradient(180deg,#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:110%;max-width:1280px;margin:0 auto;padding:28px 40px 11px;color:#000;box-sizing:border-box}

.section-wrap{position:relative;clear:both;max-width:1280px;max-height:625px;margin:0 auto;padding:0 40px;box-sizing:border-box}
.section-wrap:after{display:block;content:'';clear:both}
.story-cluster .section-wrap:first-child{padding-top:39px}
.single-area .section-wrap:first-child{padding-top:0}
.prd-area{float:left;width:50%;padding-left:28px;box-sizing:border-box}
.prd-item{position:relative;z-index:2;box-sizing:border-box}
.prd-area:after,.prd-item:after{display:block;clear:both;content:''}
.prd-second{height:50%;padding-bottom:25px}
.prd-third,.prd-fourth{float:left;width:50%}
.prd-link{display:block;position:relative}
.prd-tit{font-family:'SamsungIFBd',sans-serif;font-size:1.6vw;line-height:100%;color:#000}
.prd-info{position:absolute;bottom:7%;left:3.5%;z-index:3}
.prd-img{position:relative;z-index:1;width:100%}
.prd-img img{width:100%}
.sub-tit{display:block;font-family:'SamsungIFBd',sans-serif}
.has-frame{position:relative;float:left;width:50%;max-height:625px;padding-right:28px}
.has-frame .prd-img{position:relative;z-index:2}
.has-frame .prd-img img{width:131.5%;margin-left:-24.5%}
.has-frame .prd-tit{font-size:2.7vw;font-family:'SamsungIFBd',sans-serif;line-height:105%}

/* 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{overflow:visible;display:none;position:absolute;width:100%;height:auto;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:31px;height:31px;position:absolute;top:-35px;right:0;background:url(/common/img/btn-close.png) no-repeat 5px 5px;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}

.prd-frame{top:4%;left:0;width:100%;height:70%}
.prd-third{padding-right:12px}
.prd-fourth{padding-left:12px}

/* single cluster */
/*.single-area{height:100%;background:#fff;opacity:0}*/
.single-area{height:100%;background:#fff;opacity:0;filter:#fff;}
.single-area.has-animated{opacity:1}
.single-area .section-wrap{max-height:100%}
.single-area .prd-item{max-height:700px;float:none;width:100%}
.single-area .prd-item:before{content:'';display:block;padding-top:58.4%}
.single-area .prd-text-area{position:absolute;height:50%;top:50%;left:0;right:0;bottom:0}
.single-area .prd-vertical-wrap{position:relative;width:100%;top:50%;left:0;right:0;bottom:0;  -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%)}
.single-area .prd-img{position:absolute;top:0;left:0;right:0;bottom:50%}
.single-area .button-prd{margin-top:3%}
.single-area .button-prd:hover,
.single-area .button-prd:focus{border-color: #000;background-color: #000;color: #fff}
.single-area .prd-heading{width:100%;text-align:center;font-size:2.6vw;line-height:1;padding:0;position:absolute;top:0;left:0}
.single-area .prd-heading strong{display:inline-block;font-weight:normal}
.single-area .prd-img{width:100%;margin:0;overflow:hidden;text-align:center}
.single-area .prd-info{width:100%;max-width:100%;text-align:center;display:table;vertical-align:middle;position:static}
.single-area .prd-info .prd-tit{font-size:4.2vw;display:table-row;vertical-align:middle;text-transform:none;line-height:120%}
.single-area .prd-info .prd-txt{margin-top:1.6%;font-size:1.8vw}
.single-area .prd-img.prd-align-left{text-align:left}
.single-area .prd-img.prd-align-right{text-align:right}

.single-area .type-1 .prd-img{bottom:45.5%}
.single-area .type-1 .prd-heading{top:5%}
.single-area .type-1 .prd-text-area{top:54.5%;height:45%}
.single-area .type-1 .prd-info{padding-top:2%}

.single-area .type-2 .prd-text-area{top:0;height:45%}
.single-area .type-2 .prd-heading{top:9%}
.single-area .type-2 .prd-info{padding-top:2%}
.single-area .type-2 .prd-img{top:45.5%;bottom:0}

.single-area .type-3{padding:0}
.single-area .type-3 .prd-heading{position:absolute;top:3.5%;left:0;text-align:left}
.single-area .type-3 .prd-img{width:53%;height:89%;top:11%;right:0;left:auto}
.single-area .type-3 .prd-img img{width:100%;height:auto;position:absolute;left:0;bottom:0}
.single-area .type-3 .prd-text-area{width:44%;left:0;top:11%;height:89%}
/*.single-area .type-3 .prd-info{text-align:left}*/
.single-area .type-3 .prd-txt{margin-top:4%}
.single-area .type-3 .button-prd{margin-top:8%}

.single-area .type-4{padding:0}
.single-area .type-4 .prd-heading{position:absolute;top:3.5%;left:0;text-align:left}
.single-area .type-4 .prd-img{width:53%;height:89%;top:11%;left:0}
.single-area .type-4 .prd-img img{width:100%;height:auto;position:absolute;left:0;bottom:0}
.single-area .type-4 .prd-text-area{width:44%;right:0;left:auto;top:11%;height:89%}
.single-area .type-4 .prd-info{text-align:left}
.single-area .type-4 .prd-txt{margin-top:4%}
.single-area .type-4 .button-prd{margin-top:8%}

.lt-ie8 .single-area .prd-vertical-wrap{top:0}
.lt-ie8 .single-area .type-2 .prd-text-area,
.lt-ie8 .single-area .type-3 .prd-vertical-wrap,
.lt-ie8 .single-area .type-4 .prd-vertical-wrap{top:50px}

/* 1st cluster */
.top-area .prd-info{top:5.5%;left:7%}
.top-area .has-frame .prd-info{top:10.5%;left:auto;right:8%;text-align:right}
.top-area .prd-second .prd-info{top:5%;left:3.5%}
.top-area .type-2 .has-frame .prd-info,
.top-area .type-3 .has-frame .prd-info{left:8%;right:auto;text-align:left}
.top-area .type-2 .has-frame .prd-img img{margin-top:2.5%}

.top-area .prd-second .prd-tit{color:#000}
.top-area .prd-second .button-prd{border-color:#000;color:#000}
.top-area .prd-second .prd-link:hover .button-prd,
.top-area .prd-second .prd-link:focus .button-prd{border-color:#fff;background:#000;color:#fff}

/* 2nd cluster */
.video-pdp .prd-pdp .prd-tit{color:#fff}
.video-pdp .prd-pdp .button-prd{border-color:#fff;color:#fff}
.video-pdp .prd-pdp .prd-link:hover .button-prd,
.video-pdp .prd-pdp .prd-link:focus .button-prd{border-color:#fff;background:#fff;color:#000}


.middle-area .prd-second .prd-tit{color:#fff}
.middle-area .prd-second .button-prd{border-color:#fff;color:#fff}
.middle-area .prd-second .prd-link:hover .button-prd,
.middle-area .prd-second .prd-link:focus .button-prd{border-color:#fff;background:#fff;color:#000}


.middle-area .has-frame .prd-info{top:10.5%;right:8%;text-align: right;}
.middle-area .prd-second .button-media{top:auto;left:3.5%;bottom:12.5%}
.middle-area .prd-third .prd-info{top:auto;bottom:6.5%;left:7%}
.middle-area .prd-fourth .prd-info{position:absolute;top:auto;left:7.5%;bottom:7.5%}
.middle-area .prd-fourth .prd-tit{color:#fff}
.middle-area .prd-fourth .button-prd{border-color:#fff;color:#fff}
.middle-area .prd-fourth .prd-link:hover .button-prd,
.middle-area .prd-fourth .prd-link:focus .button-prd{border-color:#fff;background:#fff;color:#000}

/* 3rd cluster */

.bottom-area .prd-second .prd-tit{color:#000}
.bottom-area .prd-second .button-prd{border-color:#000;color:#000}
.bottom-area .prd-second .prd-link:hover .button-prd,
.bottom-area .prd-second .prd-link:focus .button-prd{border-color:#000;background:#000;color:#fff}

/*.bottom-area .prd-third  .prd-tit{color:#fff}
.bottom-area .prd-third  .button-prd{border-color:#fff;color:#fff}
.bottom-area .prd-third  .prd-link:hover .button-prd,
.bottom-area .prd-third  .prd-link:focus .button-prd{border-color:#fff;background:#fff;color:#000}*/

/*.bottom-area .prd-second .video-pdp .prd-pdp .prd-tit{color:#000}
.bottom-area .prd-second .video-pdp .prd-pdp .button-prd{border-color:#000;color:#000}
.bottom-area .prd-second .video-pdp .prd-pdp .prd-link:hover .button-prd,
.bottom-area .prd-second .video-pdp .prd-pdp .prd-link:focus .button-prd{border-color:#000;background:#000;color:#fff}*/
.bottom-area .prd-info{top:5.5%;bottom:auto;left:7%}
.bottom-area .prd-frame{top:4%}
.bottom-area .has-frame .prd-info{top:10.5%;left:auto;right:8%;bottom:auto;text-align:right}
.bottom-area .prd-second .button-media{top:auto;left:3.5%;bottom:12.5%}

.bottom-area .prd-second .prd-info{top:5.5%;bottom:auto;left:3.5%}

.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}

/* ie8 */
.lt-ie8 .prd-heading{font-size:33px}

@media screen and (min-width:1280px){
.single-area .prd-heading{font-size:30px}
.single-area .prd-info .prd-tit{font-size:50px}
.single-area .prd-info .prd-txt{font-size:22px;line-height:120%}
.bottom-area .prd-info{top:5.5%;bottom:auto;left:7%}
}
@media screen and (min-width:1200px){
.prd-heading{font-size:33px}
.prd-tit{font-size:22px}
.has-frame .prd-tit{font-size:38px}
.story-cluster{font-size:17px}
.button-prd{font-size:12px}
}
@media screen and (max-width:1100px){
.button-prd{font-size:1.2vw}
}
@media screen and (max-width:1024px){
body{background-color:#fff}
.video-wrap .button-close{background:url(/common/img/btn-close_2x.png) no-repeat 0 5px;background-size:21px 21px}
.story-cluster,.section-wrap,.has-frame{max-height:100%}
.section-wrap{max-width:1024px;min-height:460px;margin:0 auto 30px;padding:0 20px}
.story-cluster .section-wrap:first-child{padding-top:4.6%}
.single-area .section-wrap:first-child{padding-top:0}
.button-prd{margin-top:4%;padding:11px 20px 10px}
.button-media span{font-size:1.7vw} 
.bottom-area .prd-info{top:5.5%;bottom:auto;left:7%}
.prd-heading{padding:3.3% 20px 1.3%;font-size:3vw}
.prd-area{width:49%;padding-left:20px}
.prd-tit{font-size:1.6vw}
.prd-second{padding:2.5% 0 20px}
.prd-third{padding-right:10px}
.prd-fourth{padding-left:10px}
.has-frame{width:51%;padding-right:20px}
.has-frame .prd-tit{font-size:3.6vw}
.has-frame .prd-img img{width:100%}
.has-frame .button-prd{margin-top:7px}
.has-frame .prd-info{top:8.7%;right:6.7%}
.single-area{max-height:600px}
.single-area .section-wrap{padding:0 20px 0;margin:0}
.single-area .type-1{padding:0}
.single-area .type-2{padding:0}
.single-area .type-3{padding:0}
.single-area .type-4{padding:0}
.single-area .prd-info .prd-txt{font-size:1.6vw}
.single-area .type-2 .prd-info{padding-top:4%}
.top-area .has-frame .prd-img img{margin:7.5% 0 0 0}
.top-area .prd-frame{top:2.5%;height:75%}
/*.top-area .prd-info{top:-7%}*/
.top-area .prd-second .prd-info{top:7%}
.top-area .prd-second .prd-img{text-align:right}
.top-area .type-2 .prd-frame{height:87.5%}
.top-area .type-2 .has-frame .prd-img img{width:110%;margin-top:43%}
.top-area .type-3 .prd-frame{height:67%}
.top-area .type-3 .has-frame .prd-img img{width:100%;margin-top:4.5%}

.middle-area .has-frame .prd-img img{width:65%;margin:38% 0 0 28%}
.middle-area .prd-frame{top:2.5%;height:69.7%}
.middle-area .prd-fourth .prd-info{left:9%;bottom:9%}

.bottom-area .prd-frame{top:4%;height:93.5%}
.bottom-area .has-frame .prd-info{right:7.5%;bottom:-26.5%}
.bottom-area .has-frame .prd-img img{width:48%;margin:29% 0 -15.4% 6%}

.privacy{padding:15px 20px 20px}
}
@media screen and (max-width:980px){
.bottom-area .prd-info{top:5.5%;bottom:auto;left:7%}
.section-wrap{min-height:100%;margin-bottom:0;padding-bottom:4%}
.loader{background-image:none}
.prd-tit{font-size:1.6vw}
.button-prd{font-size:1.4vw}
}
@media screen and (max-width:767px){
.section-wrap{max-width:747px;margin-bottom:15px;padding:0 10px}
.story-cluster{font-size:2.2vw}
.prd-link{width:100%}
.prd-area,.has-frame{float:none;width:100%;padding:0}
.prd-heading{padding:3.3% 10px 1.3%;font-size:3.3vw}
.prd-tit{font-size:3vw}
.prd-item{max-height:100%;margin-top:13px}
.prd-item.has-frame{margin-top:13px}
.prd-item.prd-second{padding-bottom:0}
.has-frame .prd-item{padding-top:0}
.has-frame .prd-tit{font-size:4.5vw}
.button-media span{font-size:3vw}
.single-area {height:auto; max-height:none;}
.single-area .type-3 .prd-img {height:auto; padding-bottom:80px;}
.single-area .prd-item {max-height: none;}
.single-area{min-height:668px;height:770px;}
.single-area .section-wrap{padding:0;margin:0}
.single-area .prd-item{margin:0}
.single-area .prd-item:before{display:none}
.single-area .prd-img{height:215px;position:static;text-align:center}
.single-area .prd-img img,
.single-area .type-2 .prd-img img,
.single-area .type-3 .prd-img img,
.single-area .type-4 .prd-img img{width:100%;height:auto;position:static;box-sizing:border-box}
.single-area .prd-text-area,
.single-area .type-1 .prd-text-area,
.single-area .type-2 .prd-text-area{height:253px;position:relative}
.single-area .prd-heading{font-size:16px}
.single-area .prd-info .prd-tit{font-size:33px;line-height:90%}
.single-area .prd-info .prd-txt{font-size:12px;display:block;line-height:130%;width:100%;margin:2% auto 0}
.single-area .button-prd{margin-top:20px}
.single-area .type-3 .prd-heading{top:5%}
.single-area .type-4 .prd-heading{top:50%}
.single-area .type-3 .prd-text-area,
.single-area .type-4 .prd-text-area{width:100%;height:253px;position:static;text-align:center}
.single-area .type-3 .prd-img,
.single-area .type-4 .prd-img{width:100%;/*height:215px;*/position:static;text-align:center}
.single-area .type-3 .prd-info,
.single-area .type-3 .prd-heading,
.single-area .type-4 .prd-info,
.single-area .type-4 .prd-heading{text-align:center}
.single-area .type-1 .button-prd,
.single-area .type-2 .button-prd,
.single-area .type-3 .button-prd,
.single-area .type-4 .button-prd{margin-top:20px}
.single-area .type-3 .prd-info{padding-top:14%}
.single-area .type-4 .prd-info{padding-top:2%}
.single-area .type-1 .prd-img img,
.single-area .type-2 .prd-img img{position:relative;top:50%;bottom:auto;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%)}
.btn-prev, .btn-next{display:none}
.top-area .prd-frame{height:84%}
.top-area .has-frame,.top-area .prd-area{width:100%}
.top-area .has-frame .prd-info{top:5.5%;left:3.5%}
.top-area .has-frame .prd-img img{margin-top:13%}
.top-area .prd-second .prd-info{top:6.5%;text-align:left}
.top-area .prd-third{padding-left:0}
.top-area .prd-fourth{padding-right:0}
.top-area .type-2 .has-frame .prd-info,
.top-area .type-3 .has-frame .prd-info{left:3.5%}
.top-area .type-2 .has-frame .prd-img img{margin-top:27%}
.top-area .type-3 .has-frame .prd-img img{margin-top:5.5%}
.middle-area .prd-frame{height:80.5%}
.middle-area .prd-area:after{display:block;height:100%;clear:both;content:''}
.middle-area .prd-heading{text-align:left}
.middle-area .prd-area,.middle-area .has-frame{float:none;width:100%;padding:0}
.middle-area .has-frame .prd-img img{margin:26% 0 0 18.5%}
.middle-area .has-frame .prd-info{top:5.5%;left:3.5%}
.middle-area .prd-second .button-media{left:3.5%;bottom:15%}
.middle-area .prd-fourth .prd-info{left:5.5%;bottom:5.5%}
.bottom-area .has-frame.prd-item{padding-bottom:6.5%}
.bottom-area .has-frame .prd-info{right:3.5%;bottom:-25.5%}
.bottom-area .has-frame .prd-img{margin-top:0}
.bottom-area .has-frame .prd-img img{width:48%;margin:8% 0 -3.4% 10%}
.bottom-area .prd-second .button-media{left:1.8%;bottom:7.5%}

.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){
.prd-heading{font-size:22px}
.prd-tit{font-size:18px}
.button-prd{padding:8px 20px;font-size:12px}
.has-frame .prd-tit{font-size:23px}
.top-area .has-frame .prd-info{top:6%;left:4%}
.top-area .has-frame .prd-img img{margin-top:13%}
.top-area .type-2 .has-frame .prd-info,
.top-area .type-3 .has-frame .prd-info{left:4%}
.top-area .type-2 .has-frame .prd-img img{margin-top:34%}
.top-area .type-3 .has-frame .prd-img img{margin-top:6%}
.middle-area .has-frame .prd-info{top:6%;left:4%}
.middle-area .button-media span,
.bottom-area .button-media span{font-size:18px}
.bottom-area .has-frame .prd-img img{width:48%;margin:17% 0 -2.4% 10%}
}

@media screen and (max-width:520px){
.single-area{min-height:540px;height:599px;}
.single-area .prd-heading{font-size:16px}
.single-area .prd-info .prd-tit{font-size:33px}
.single-area .prd-info .prd-txt{font-size:12px}
.single-area .button-prd{font-size:12px}
}

@media screen and (max-width:480px){
.story-cluster{font-size:3.8vw}
.prd-heading{font-size:5.5vw}
.prd-tit{font-size:4.5vw}
.has-frame .prd-tit{font-size:5vw}
.button-prd{padding:8px 18px;font-size:12px}
.top-area .has-frame .prd-img img{margin-top:13%}
.top-area .type-2 .has-frame .prd-img img{margin-top:48%}
.top-area .type-3 .has-frame .prd-img img{margin-top:7%}
.middle-area .has-frame .prd-img img{margin-top:32%}
.middle-area .prd-frame{height:76.5%}
.bottom-area .has-frame .prd-info{right:5.5%;bottom:-24%}
.bottom-area .has-frame .prd-img img{width:48%;margin:18% 0% -2.4% 10%}
.bottom-area .prd-second{margin-top:13px}
.bottom-area .prd-second .button-media{left:3.5%;bottom:15%}
.middle-area .button-media span, .bottom-area .button-media span{font-size:4.5vw}
}
@media screen and (max-width:410px){
.single-area{min-height:518px;height:540px;}
.single-area .prd-heading{font-size:16px;}
.single-area .prd-info .prd-tit{font-size:33px;}
.single-area .prd-info .prd-txt{font-size:12px;}
.single-area .button-prd{font-size:12px;}
}
/*last part*/
@media screen and (max-width:320px){
.story-cluster{font-size:4vw}
.prd-heading{font-size:5.5vw}
.prd-tit{font-size:4.3vw}
.has-frame .prd-tit{font-size:6vw}
.button-prd{padding:8px 20px;font-size:3vw}
.top-area .has-frame .prd-info{top:10%;left:8%}
.top-area .has-frame .prd-img img{margin-top:13.5%}
.top-area .prd-second{padding-top:5%}
.top-area .prd-second .prd-info{top:5%;left:3%}
.top-area .type-2 .has-frame .prd-info,
.top-area .type-3 .has-frame .prd-info{left:8%}
.top-area .type-2 .prd-frame{height:92%}
.top-area .type-2 .has-frame .prd-img img{margin-top:54%}
.top-area .type-3 .prd-frame{height:77%}
.top-area .type-3 .has-frame .prd-img img{margin-top:9%}
.middle-area .has-frame .prd-info{top:10%;left:8%}
.middle-area .has-frame .prd-img img{margin-top:42%}
.middle-area .prd-third{padding-bottom:0}
.bottom-area .prd-frame{top:4%;height:130%}
.bottom-area .has-frame.prd-item{padding-bottom:45%}
.bottom-area .has-frame .prd-info{right:8%;bottom:-44%}
.bottom-area .has-frame .prd-img img{width:53%;margin:37% 0% -48.4% 10%}
.bottom-area .prd-second .button-media{left:3.5%;bottom:15%}
}
/*last part*/
/* 단일클러스터 추가시 하기 내용 home.css에 추가 및 html 내 home-1tile.css 호출 삭제 */
/* If a single cluster is added, attach below codes to 'home.css', and delete the link tag referring to 'home-1tile.css' in HTML document. */
.prd-heading .point {color:#0e78bc}
.single-area .prd-info {margin:0 auto; max-width:93%;}


/*css for new cluster*/
.single-area {filter:none;}
.single-area .type-3 .prd-text-area {top:0; width:45%; height:100%; z-index:2; }
.single-area .type-3 .prd-img {top:0; width:58.4%; height:100%;}
.single-area .type-3 .prd-img img {left:auto; right:0;}
@media screen and (max-width: 767px) {
        .single-area {min-height:342px; height:auto; max-height:none;}
        .single-area .type-3 .prd-img {height:auto; padding-bottom:80px;}
        .single-area .prd-item {max-height: none;}
        .single-area .type-3 .prd-text-area {
            width: 100%;
            height: 253px;
        }
        .single-area .type-3 .prd-img {
            width: 100%;
            position: static;
            padding-bottom: 0;
        }
    }

	
/*css for new s7 cluster*/
.single-area .prd-item-s7br:before{padding-top: 53.4%;}
.single-area .type-3 .prd-img-s7br{width:100%;}
.section-wrap-s7br{max-width: 1920px; padding: 0px;}
.single-area .type-3 .prd-text-area-s7br{left:43%;}
.single-area .prd-vertical-wrap-s7br{top:35%;}
.prd-tit-s7br{color:#000;}
.prd-txt-s7br{color:#000;}
.prd-heading-s7br{color:#000;}

.prd-link-s7br{display:inline;}
.button-prd-s7br{border-color:#003267;color:#003267;}
.prd-link:hover .button-prd-s7br,
.prd-link:focus .button-prd-s7br{border-color:#fff;background:#003267;color:#fff; display}

@media screen and (max-width: 1024px){
	.section-wrap-s7br:first-child{padding: 0px;}
	}
@media screen and (max-width: 767px){
	.single-area .type-3 .prd-text-area-s7br{position: absolute; width: 50%; left: 0px;}
	.single-area .prd-vertical-wrap-s7br{top:125%; left:90%;}
	.single-area .prd-info .prd-tit{line-height:130% !important;}
}

@media screen and (max-width: 610px){
	.single-area .type-3 .prd-text-area-s7br{position: absolute; width: 50%; left: 0px;}
	.single-area .prd-vertical-wrap-s7br{top:110%; left:90%;}
	.single-area .prd-info .prd-tit{line-height:130% !important;}
}

@media screen and (max-width: 530px){
	.single-area .type-3 .prd-text-area-s7br{position: absolute; width: 100%; left: 0px;}
	.single-area .prd-vertical-wrap-s7br{top:30%; left:15%;}
	.single-area .prd-info .prd-tit{line-height:130% !important;}
}

@media screen and (min-width:1200px){
.single-area .prd-heading{font-size:30px}
.single-area .prd-info .prd-tit-s7br{font-size:34px; letter-spacing: -1px;}
.single-area .prd-info .prd-tit-s7br1{font-size:83px; letter-spacing: -2px;}
.single-area .prd-info .prd-tit-s7br2{font-size:94px; letter-spacing: -2px; line-height:50% !important;}
.single-area .prd-info .prd-txt-s7br{font-size:20px; letter-spacing: -0.7px; margin-top:2% !important;}
.bottom-area .prd-info{top:5.5%;bottom:auto;left:7%}
}

@media screen and (max-width:1199px){
.single-area .prd-info .prd-tit-s7br{font-size:30px; letter-spacing: -1px;}
.single-area .prd-info .prd-tit-s7br1{font-size:73px; letter-spacing: -2px;}
.single-area .prd-info .prd-tit-s7br2{font-size:84px; letter-spacing: -2px; line-height:50% !important;}
.single-area .prd-info .prd-txt-s7br{font-size:18px; letter-spacing: -0.7px; margin-top:2% !important;}
}

@media screen and (max-width:999px){
.single-area .prd-info .prd-tit-s7br{font-size:25px; letter-spacing: -1px;}
.single-area .prd-info .prd-tit-s7br1{font-size:61px; letter-spacing: -2px;}
.single-area .prd-info .prd-tit-s7br2{font-size:70px; letter-spacing: -2px; line-height:50% !important;}
.single-area .prd-info .prd-txt-s7br{font-size:15px; letter-spacing: -0.7px; margin-top:2% !important;}
}

@media screen and (max-width:640px){
.single-area .prd-info .prd-tit-s7br{font-size:22px; letter-spacing: -1px;}
.single-area .prd-info .prd-tit-s7br1{font-size:54px; letter-spacing: -2px;}
.single-area .prd-info .prd-tit-s7br2{font-size:62px; letter-spacing: -2px; line-height:50% !important;}
.single-area .prd-info .prd-txt-s7br{font-size:13px; letter-spacing: -0.7px; margin-top:2% !important;}
}

@media screen and (max-width:545px){
.single-area .prd-info .prd-tit-s7br{font-size:19px; letter-spacing: -1px;}
.single-area .prd-info .prd-tit-s7br1{font-size:47px; letter-spacing: -2px;}
.single-area .prd-info .prd-tit-s7br2{font-size:53px; letter-spacing: -2px; line-height:50% !important;}
.single-area .prd-info .prd-txt-s7br{font-size:12px; letter-spacing: -0.7px; margin-top:2% !important;}
}




/*css for new s7 cluster*/