/*@import url('normalize.css');*/

/* Layout style  */
.btn button {position:absolute;z-index:2000;top:52%;width:40px;height:40px;border:3px solid #fff;border:3px solid #fff;text-indent:-90000px;margin-top:-40px;cursor:pointer;
    -webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);
    -webkit-transition:opacity 0.4s ease-in-out 0.2s;-moz-transition:opacity 0.4s ease-in-out 0.2s;-o-transition:opacity 0.4s ease-in-out 0.2s;-ms-transition:opacity 0.4s ease-in-out 0.2s;transition:opacity 0.4s ease-in-out 0.2s;}

.btn button:hover {opacity:0.9}
.btn button.btn_prev {left:5%;border-right:none;border-top:none;}
.btn button.btn_next {right:5%;border-left:none;border-bottom:none;}

.roll_area {overflow:hidden;}
.roll_area .wrap{display:table;table-layout:fixed;}
.roll_area .area .bg{position:absolute;top:0;left:0;width:100%;}
.roll_area .area h2, .roll_area .area .wrap{position:relative;}
.roll_area .area{display:table-cell;position:relative;vertical-align:middle;word-break:break-all;}
.roll_area .area .cont1{margin:10px 0 0;font-size:18px;}
.roll_area .area h2, .roll_area .area .cont1, .roll_area .area .cont2 {width:80%;margin:0 auto;text-align:center;color:#fff;font-weight:100;}
.roll_area .area h2, .roll_area .area .cont1, .roll_area .area .cont2, .roll_area .area .da_img {position:relative;}
.roll_area .area h2 {margin-bottom:20px;font-size:3em;z-index:10;letter-spacing:-1px;word-wrap:break-word;word-break:keep-all}
.roll_area .area img{max-width:100%;}

/* brandstory + brandstrategy */
.brandstory .intro, .brandstrategy .intro, .roll_area{position:absolute;top:50%;left:50%;margin:-320px 0 0 -640px;}
.brandstory .intro, .brandstrategy .intro, .roll_area, .roll_area .area{width:1280px;height:780px;}

.brandstory .intro img, .brandstrategy .intro img {width:100%;height:auto;}

@media screen and (max-width:1366px), (max-height:1024px) {
    .brandstory .intro, .brandstrategy .intro, .roll_area, .roll_area .area{width:1000px;height:609px;margin:-250px 0 0 -500px;}
}

@media screen and (max-width:1023px) {

}

@media screen and (max-width:969px) {
    .header{position:relative;max-width:700px;width:100%;margin:0 auto;}

    .brandstory .intro, .brandstrategy .intro, .roll_area, .roll_area .area{margin:-140px 0 0 -350px;width:700px;height:427px;}
    .roll_area .area h2{font-size:2.5em}
    .roll_area .area [class^='cont']{font-size:1.1em}
}

@media screen and (max-width:1400px) {

}

@media screen and (max-width:1200px) {

}

@media screen and (max-height:800px){
  
}

@media screen and (max-width:767px) {

}

@media screen and (max-width:969px) {
  
}