div.contents div.dynamic-simulation{width:100%;max-width:720px;margin:0 auto 20px}
div.contents div.dynamic-simulation ul.ds{margin:15px 0 0;font-family:Roboto,Arial,sans-serif;font-size:12px;list-style:none;text-align:center}
div.contents div.dynamic-simulation ul.ds li{margin:0 1px 50px 0;background-color:#f3f6f9;position:relative;display:inline-block}
div.contents div.dynamic-simulation ul.ds li:after{content:attr(data-dimension);width:68px;height:18px;line-height:18px;text-align:center;color:#e3e6e9;background-color:#666;background-color:rgba(0,0,0,0.6);bottom:15px;left:15px;position:absolute;transition:all .35s linear}
div.contents div.dynamic-simulation ul.ds li a{margin:1px;padding:12px;background-color:#f3f6f9;display:block;transition:all .15s linear}
div.contents div.dynamic-simulation ul.ds li a:hover{background-color:#fff}
div.contents div.dynamic-simulation ul.ds li a img{display:block}
div.contents div.dynamic-simulation ul.ds li b{padding:0 10px;color:#939699;font-weight:400;height:18px;line-height:18px;bottom:-18px;right:0;position:absolute;transition:all .15s linear}
div.contents div.dynamic-simulation ul.ds li b.m{cursor:pointer}
div.contents div.dynamic-simulation ul.ds li:hover{background-color:#508555}
div.contents div.dynamic-simulation ul.ds li:hover b.m{color:#fff;background-color:#508555}
div.contents div.dynamic-simulation ul.ds li:hover:after{opacity:0}
div.contents div.dynamic-simulation h1{margin:0 0 3px 20px;font-size:26px;color:#636669}
div.contents div.dynamic-simulation h1 strong{font-family:'Segoe UI',Arial,sans-serif;font-weight:lighter;font-size:24px;color:#508555}
div.contents div.dynamic-simulation p.tools{margin:0 20px 5px;font-size:14px}
div.contents div.dynamic-simulation p.prompt{padding:80px 10px 0 0;color:#838689;text-align:right}
div.contents div.dynamic-simulation p b{padding:0 2px;font-family:Roboto,Arial,sans-serif;font-weight:400}
div.contents div.dynamic-simulation p strong{font-family:Roboto,Arial,sans-serif;color:#508555;font-weight:400}
/* DYNAMIC-ANIMATION */
div.contents div.dynamic-animation{margin:10px 0px 50px 0px;}
div.contents div.dynamic-animation h1{margin:0 0 3px 20px;font-size:32px;color:#636669}
div.contents div.dynamic-animation h2{margin:10px 0 3px 20px;font-size:26px;color:#ff9600;}
div.contents div.dynamic-animation h2 b{font-size:1.1em;}
div.contents div.dynamic-animation h2 strong{font-family:Roboto-Light,Arial,sans-serif;font-weight:lighter;letter-spacing:-1px;font-size:24px;color:#508555}
div.contents div.dynamic-animation h3{margin:3px 10px 6px 20px;font-size:17px;color:#508555}
div.contents div.dynamic-animation p b{padding:0 2px;font-family:Roboto,Arial,sans-serif;font-weight:400}
div.contents div.dynamic-animation p strong{font-family:Roboto,Arial,sans-serif;color:#508555;font-weight:400}
div.contents div.dynamic-animation p.tools{margin:0 20px 5px;font-size:14px;line-height:1.6em;}
div.contents div.dynamic-animation p.prompt{padding:80px 26px 0 0;color:#838689;text-align:right}
div.contents div.dynamic-animation .mosaicflow{margin:20px 20px 100px 20px;}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item{margin:1px;border:2px solid #fff;display:inline-block;cursor:pointer;position:relative;transition:all .15s linear}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item:after{content:"";width:100%;height:90%;top:0;left:0;position:absolute;opacity:0.8;transition: opacity .15s linear;}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item:after{background:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20id%3D%22Play-Arrow%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2234px%22%20height%3D%2234px%22%20viewBox%3D%220%200%2034%2034%22%20enable-background%3D%22new%200%200%2034%2034%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M17%2C2.8C9.2%2C2.8%2C2.8%2C9.2%2C2.8%2C17S9.2%2C31.2%2C17%2C31.2S31.2%2C24.8%2C31.2%2C17S24.8%2C2.8%2C17%2C2.8z%20M17%2C30.6%20C9.5%2C30.6%2C3.4%2C24.5%2C3.4%2C17S9.5%2C3.4%2C17%2C3.4c7.5%2C0%2C13.6%2C6.1%2C13.6%2C13.6S24.5%2C30.6%2C17%2C30.6z%22%2F%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M13.5%2C21.7c0%2C0.6%2C0.3%2C0.8%2C0.8%2C0.5c3-1.6%2C5.9-3.1%2C8.9-4.7c0.5-0.3%2C0.5-0.7%2C0-1c-3-1.6-5.9-3.1-8.9-4.7%20c-0.5-0.3-0.8-0.1-0.8%2C0.5C13.5%2C15.4%2C13.5%2C18.6%2C13.5%2C21.7z%22%2F%3E%3C%2Fsvg%3E") no-repeat center;background-size:30%;}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item span{padding:0px 6px;font-family:Roboto,Arial,sans-serif;font-size:12px;line-height:28px;color:#fff;background-color:#636669;border:solid #fff;border-width:0px 1px 1px 1px;display:block;transition:all .15s linear}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item span b{font-family:Roboto-Light,Arial,sans-serif;float:right;font-weight:400;opacity:0.7;}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item.clicked{border-color:#ee3399}
/* MOSAIC-FLOW CSS */
div.dynamic-animation .mosaicflow:after{content:"";display:block;clear:both;}
div.dynamic-animation .mosaicflow__column{float:left;box-sizing:border-box;}
div.dynamic-animation .mosaicflow__item{position:relative;}
div.dynamic-animation .mosaicflow__item img{display:block;width:100%;max-width:300px;height:auto;border:solid #fff;border-width:1px 1px 1px 1px;box-sizing:border-box;}
div.dynamic-animation div.mosaic-flow{margin:1px;}
div.animation-overlay{width:100%;background-color:rgba(0,0,0,0.85);display:none;position:absolute;top:0;left:0;z-index:1100}
div.animation-wrap{width:100%;outline:none;display:none;position:absolute;top:0;left:0;z-index:1101;background-color:#fff;transition:all .3s ease}
div.animation-wrap div.animation-title-bar{width:100%;height:48px;line-height:48px;background-color:rgba(0,0,0,0.1);position:absolute;top:0;left:0;z-index:1103;cursor:pointer;text-align:center;}
div.animation-wrap div.animation-title-bar:after{content:"";width:48px;height:48px;top:0;right:0;background:url(../images/cancel.png) no-repeat center;position:absolute;}
div.animation-wrap div.animation-title-bar b{font-family:Roboto-Light,Arial,sans-serif;font-size:14px;color:rgba(255,255,255,0.35);font-weight:400}
div.animation-wrap div.animation-loading-bar{width:1%;height:1px;background-color:#00CC00;display:none;position:absolute;top:48px;left:1px;z-index:1103;transition:width .35s linear}
div.animation-wrap div.media{width:100%;height:100%;background:url(../images/loading-198.gif) no-repeat center;box-shadow:1px 1px 28px rgba(0,0,0,0.95);position:relative;z-index:1102}
div.animation-wrap div.media video{width:100%;height:100%;display:none;}
div.animation-wrap div.media video::-webkit-media-controls-enclosure{overflow:hidden;}
div.animation-wrap div.media video::-webkit-media-controls-panel{width:calc(100% + 30px);}
div.frameView-loading{top:50%;left:50%;width:40px;height:40px;margin-top:-20px;margin-left:-20px;background:url(../images/loading-min.gif) no-repeat center;cursor:pointer;display:none;overflow:hidden;position:fixed;z-index:1104}
div.frameView-overlay{width:100%;display:none;position:absolute;top:0;left:0;z-index:1100}
div.frameView-transmission{display:none}
#frameView-wrap{outline:none;display:none;position:absolute;top:0;left:0;z-index:1101}
#frameView-wrap div.media{width:100%;height:100%;background:#fff;border:32px solid #fff;box-shadow:1px 1px 28px rgba(0,0,0,0.95);position:relative;z-index:1102}
#frameView-wrap div.flash-player-error{font-family:Roboto,Arial,sans-serif}
#frameView-wrap div.flash-player-error b{color:#c30}
#frameView-wrap div.flash-player-error p{height:38px}
#frameView-wrap a.close{width:32px;height:32px;background:url(../images/close.png) no-repeat center #fff;cursor:pointer;opacity:.35;display:none;position:absolute;top:-32px;right:-32px;z-index:1103;transition:opacity .35s linear}
#frameView-wrap a.close:hover{opacity:1}
#frameView-error{margin:0;padding:50px;font-family:'Segoe UI',Arial,sans-serif;font-weight:lighter;font-size:24px;color:#c30;letter-spacing:-1px}
#frameView-img{width:100%;height:100%;padding:0;margin:0;border:none;outline:none;line-height:0;vertical-align:top}
@media(min-width:1200px) {
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item:hover{border-color:#67443B}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item:hover:after{opacity:0.0;}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item:hover span{background-color:#67443B;}
}
@media(max-width:520px){
div.contents div.dynamic-simulation ul.ds li a{padding:5px}
div.contents div.dynamic-simulation h1 strong{font-size:18px}
}
@media(max-width:420px){
div.animation-tip{padding-right:10px;}
div.contents div.dynamic-simulation ul.ds li a{padding:15px}
div.contents p.prompt{display:none}
div.contents div.dynamic-animation .mosaicflow .mosaicflow__item span{display:none}
}
@media(max-width:380px){
div.contents div.dynamic-simulation ul.ds li a{padding:3px}
div.contents div.dynamic-animation .mosaicflow{margin:10px 5px;}
}